@energycap/components 0.46.16 → 22.0.2-angular-22.20260721-2053

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/energycap-components.min.css +1 -1
  2. package/fesm2022/energycap-components.mjs +350 -350
  3. package/fesm2022/energycap-components.mjs.map +1 -1
  4. package/package.json +8 -7
  5. package/schematics/utilities/typescript.js +34 -1
  6. package/schematics/utilities/typescript.js.map +1 -1
  7. package/schematics/utilities/workspace.js +1 -0
  8. package/schematics/utilities/workspace.js.map +1 -1
  9. package/src/styles/mixins/_button-base.scss +6 -1
  10. package/src/styles/mixins/_form-control-base.scss +10 -1
  11. package/src/styles/mixins/_login.scss +1 -0
  12. package/src/styles/mixins/_menu-base.scss +7 -2
  13. package/src/styles/mixins/_tabs-base.scss +11 -3
  14. package/src/styles/mixins/_text.scss +6 -2
  15. package/types/energycap-components.d.ts +2 -3
package/fesm2022/energycap-components.mjs CHANGED
@@ -6,7 +6,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
6
6
  import * as i1 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
8
  import * as i0 from '@angular/core';
9
- import { Injectable, EventEmitter, isDevMode, ViewChild, Output, Input, HostBinding, Component, Directive, Host, Pipe, ChangeDetectionStrategy, HostListener, DOCUMENT, Inject, ContentChild, ViewEncapsulation, ElementRef, TemplateRef, ContentChildren, ViewContainerRef, NgModule, Injector } from '@angular/core';
9
+ import { Injectable, EventEmitter, isDevMode, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, Component, Directive, Host, Pipe, HostListener, DOCUMENT, Inject, ContentChild, ViewEncapsulation, ElementRef, TemplateRef, ContentChildren, ViewContainerRef, NgModule, Injector } from '@angular/core';
10
10
  import * as i4 from '@angular/forms';
11
11
  import { Validators, UntypedFormControl, FormControlDirective, FormControl, FormGroup, UntypedFormGroup, UntypedFormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
12
12
  import * as i1$2 from '@angular/router';
@@ -114,10 +114,10 @@ class CacheService {
114
114
  return null;
115
115
  }
116
116
  }
117
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
118
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CacheService, providedIn: 'root' }); }
117
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
118
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CacheService, providedIn: 'root' }); }
119
119
  }
120
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CacheService, decorators: [{
120
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CacheService, decorators: [{
121
121
  type: Injectable,
122
122
  args: [{
123
123
  providedIn: 'root'
@@ -241,12 +241,12 @@ class ButtonComponent {
241
241
  this.hasLoggedMissingAccessibleName = true;
242
242
  }
243
243
  }
244
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
245
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", label: "label", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", ariaHaspopup: "ariaHaspopup", ariaActivedescendant: "ariaActivedescendant", ariaControls: "ariaControls", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
244
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
245
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", label: "label", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", ariaHaspopup: "ariaHaspopup", ariaActivedescendant: "ariaActivedescendant", ariaControls: "ariaControls", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}button:focus-visible{outline-color:var(--ec-border-color-focus)}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button:focus{outline:2px solid transparent;outline-offset:-2px}:host(.is-tab) button:focus-visible{outline-color:var(--ec-border-color-focus)}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
246
246
  }
247
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
247
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
248
248
  type: Component,
249
- args: [{ selector: 'ec-button', standalone: false, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
249
+ args: [{ selector: 'ec-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}button:focus-visible{outline-color:var(--ec-border-color-focus)}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}:host(.is-tab) button:focus{outline:2px solid transparent;outline-offset:-2px}:host(.is-tab) button:focus-visible{outline-color:var(--ec-border-color-focus)}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
250
250
  }], ctorParameters: () => [], propDecorators: { id: [{
251
251
  type: HostBinding,
252
252
  args: ['attr.id']
@@ -367,12 +367,12 @@ class BannerComponent {
367
367
  this.icon = '';
368
368
  }
369
369
  }
370
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
371
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
370
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
371
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
372
372
  }
373
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, decorators: [{
373
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BannerComponent, decorators: [{
374
374
  type: Component,
375
- args: [{ selector: 'ec-banner', standalone: false, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
375
+ args: [{ selector: 'ec-banner', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\" aria-hidden=\"true\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"] }]
376
376
  }], ctorParameters: () => [{ type: CacheService }], propDecorators: { hidden: [{
377
377
  type: HostBinding,
378
378
  args: ['hidden']
@@ -450,10 +450,10 @@ class CopyButtonBaseDirective {
450
450
  this.button.pendingIcon = defaultPendingIcon;
451
451
  }, 500);
452
452
  }
453
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyButtonBaseDirective, deps: [{ token: ButtonComponent }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
454
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CopyButtonBaseDirective, isStandalone: true, host: { properties: { "class.is-success": "this.copySuccess", "class.is-error": "this.copyFailed" } }, ngImport: i0 }); }
453
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyButtonBaseDirective, deps: [{ token: ButtonComponent }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
454
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CopyButtonBaseDirective, isStandalone: true, host: { properties: { "class.is-success": "this.copySuccess", "class.is-error": "this.copyFailed" } }, ngImport: i0 }); }
455
455
  }
456
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyButtonBaseDirective, decorators: [{
456
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyButtonBaseDirective, decorators: [{
457
457
  type: Directive
458
458
  }], ctorParameters: () => [{ type: ButtonComponent }, { type: i0.Injector }], propDecorators: { copySuccess: [{
459
459
  type: HostBinding,
@@ -472,10 +472,10 @@ class CopyButtonDirective extends CopyButtonBaseDirective {
472
472
  getDataForClipboard() {
473
473
  return this.copyFormModel?.value;
474
474
  }
475
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyButtonDirective, deps: [{ token: ButtonComponent, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
476
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CopyButtonDirective, isStandalone: false, selector: "[ecCopyButton]", inputs: { copyFormModel: ["ecCopyButton", "copyFormModel"] }, usesInheritance: true, ngImport: i0 }); }
475
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyButtonDirective, deps: [{ token: ButtonComponent, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
476
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CopyButtonDirective, isStandalone: false, selector: "[ecCopyButton]", inputs: { copyFormModel: ["ecCopyButton", "copyFormModel"] }, usesInheritance: true, ngImport: i0 }); }
477
477
  }
478
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyButtonDirective, decorators: [{
478
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyButtonDirective, decorators: [{
479
479
  type: Directive,
480
480
  args: [{
481
481
  selector: '[ecCopyButton]',
@@ -512,10 +512,10 @@ class CopyTableButtonDirective extends CopyButtonBaseDirective {
512
512
  }).join('\n');
513
513
  return rawTableText;
514
514
  }
515
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyTableButtonDirective, deps: [{ token: ButtonComponent, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
516
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: CopyTableButtonDirective, isStandalone: false, selector: "[ecCopyTableButton]", inputs: { tableId: ["ecCopyTableButton", "tableId"] }, usesInheritance: true, ngImport: i0 }); }
515
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyTableButtonDirective, deps: [{ token: ButtonComponent, host: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
516
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: CopyTableButtonDirective, isStandalone: false, selector: "[ecCopyTableButton]", inputs: { tableId: ["ecCopyTableButton", "tableId"] }, usesInheritance: true, ngImport: i0 }); }
517
517
  }
518
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CopyTableButtonDirective, decorators: [{
518
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CopyTableButtonDirective, decorators: [{
519
519
  type: Directive,
520
520
  args: [{
521
521
  selector: '[ecCopyTableButton]',
@@ -1632,10 +1632,10 @@ class UserPreferenceService {
1632
1632
  getPreferences() {
1633
1633
  return of({ preference: { dateFormat: 'MM/DD/YYYY', timeFormat: 'h:mm:ss a' } });
1634
1634
  }
1635
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserPreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1636
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserPreferenceService, providedIn: 'root' }); }
1635
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UserPreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1636
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UserPreferenceService, providedIn: 'root' }); }
1637
1637
  }
1638
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserPreferenceService, decorators: [{
1638
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UserPreferenceService, decorators: [{
1639
1639
  type: Injectable,
1640
1640
  args: [{
1641
1641
  providedIn: 'root'
@@ -1680,10 +1680,10 @@ class DateDisplayPipe {
1680
1680
  }
1681
1681
  return display;
1682
1682
  }
1683
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
1684
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe, isStandalone: false, name: "dateDisplay" }); }
1683
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
1684
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe, isStandalone: false, name: "dateDisplay" }); }
1685
1685
  }
1686
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe, decorators: [{
1686
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe, decorators: [{
1687
1687
  type: Pipe,
1688
1688
  args: [{
1689
1689
  name: 'dateDisplay',
@@ -1745,8 +1745,8 @@ var DateInput;
1745
1745
  get month() { return this._month; }
1746
1746
  get quarter() { return this._quarter; }
1747
1747
  get year() { return this._year; }
1748
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectionStrategies, deps: [{ token: DateDisplayPipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
1749
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectionStrategies }); }
1748
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectionStrategies, deps: [{ token: DateDisplayPipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
1749
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectionStrategies }); }
1750
1750
  }
1751
1751
  DateInput.SelectionStrategies = SelectionStrategies;
1752
1752
  })(DateInput || (DateInput = {}));
@@ -1815,12 +1815,12 @@ class CalendarItemComponent {
1815
1815
  const d = DateTime.fromJSDate(date).startOf(view);
1816
1816
  return d < DateTime.fromJSDate(minDate).startOf(view) || d > DateTime.fromJSDate(maxDate).startOf(view);
1817
1817
  }
1818
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1819
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CalendarItemComponent, isStandalone: false, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1818
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1819
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: CalendarItemComponent, isStandalone: false, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host:focus-visible{outline-color:var(--ec-border-color-focus)}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1820
1820
  }
1821
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarItemComponent, decorators: [{
1821
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarItemComponent, decorators: [{
1822
1822
  type: Component,
1823
- args: [{ selector: 'button[ec-calendar-item]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"] }]
1823
+ args: [{ selector: 'button[ec-calendar-item]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host:focus-visible{outline-color:var(--ec-border-color-focus)}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"] }]
1824
1824
  }], ctorParameters: () => [], propDecorators: { item: [{
1825
1825
  type: Input
1826
1826
  }], selection: [{
@@ -2069,12 +2069,12 @@ class CalendarComponent {
2069
2069
  const lastRow = this.calendarItems[this.calendarItems.length - 1];
2070
2070
  return lastRow[lastRow.length - 1];
2071
2071
  }
2072
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2073
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CalendarComponent, isStandalone: false, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n <button id=\"{{id}}_prev_button\"\n class=\"mr-auto\"\n (click)=\"onPreviousClick()\"\n [disabled]=\"disablePreviousButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n </button>\n\n @if (view.mode === 'day') {\n <button\n id=\"{{id}}_month_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onMonthClick()\"\n tabindex=\"{{tabindex}}\">\n {{month}}\n </button>\n }\n\n @if (view.mode !== 'year') {\n <button\n id=\"{{id}}_year_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onYearClick()\"\n tabindex=\"{{tabindex}}\">\n {{year}}\n </button>\n }\n\n @if (view.mode === 'year') {\n <div id=\"{{id}}_year_range\"\n class=\"text-body-1 font-weight-bold\"\n [innerHTML]=\"yearRange\">\n </div>\n }\n\n <button id=\"{{id}}_next_button\"\n class=\"ml-auto\"\n (click)=\"onNextClick()\"\n [disabled]=\"disableNextButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n </button>\n</header>\n\n@if (view.mode === 'day') {\n <div\n class=\"mb-1 px-2 d-flex\">\n @for (day of weekDays; track day) {\n <h3\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n }\n </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n <div\n class=\"px-2 d-flex {{view.mode}}-view\"\n [class.mb-1]=\"!isLast\"\n [class.mb-2]=\"isLast\">\n @for (item of row; track trackByDate($index, item)) {\n <button\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n ec-calendar-item\n [item]=\"item\"\n [selection]=\"selection\"\n [view]=\"view\"\n (click)=\"onItemSelected(item)\"\n [innerHTML]=\"item.label\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n tabindex=\"{{tabindex}}\">\n </button>\n }\n </div>\n}\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2072
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2073
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CalendarComponent, isStandalone: false, selector: "ec-calendar", inputs: { id: "id", selection: "selection", selectionMode: "selectionMode", minDate: "minDate", maxDate: "maxDate", tabindex: "tabindex", view: "view" }, outputs: { dateSelected: "dateSelected", viewChange: "viewChange" }, host: { properties: { "attr.id": "this.id" } }, usesOnChanges: true, ngImport: i0, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n <button id=\"{{id}}_prev_button\"\n class=\"mr-auto\"\n (click)=\"onPreviousClick()\"\n [disabled]=\"disablePreviousButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n </button>\n\n @if (view.mode === 'day') {\n <button\n id=\"{{id}}_month_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onMonthClick()\"\n tabindex=\"{{tabindex}}\">\n {{month}}\n </button>\n }\n\n @if (view.mode !== 'year') {\n <button\n id=\"{{id}}_year_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onYearClick()\"\n tabindex=\"{{tabindex}}\">\n {{year}}\n </button>\n }\n\n @if (view.mode === 'year') {\n <div id=\"{{id}}_year_range\"\n class=\"text-body-1 font-weight-bold\"\n [innerHTML]=\"yearRange\">\n </div>\n }\n\n <button id=\"{{id}}_next_button\"\n class=\"ml-auto\"\n (click)=\"onNextClick()\"\n [disabled]=\"disableNextButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n </button>\n</header>\n\n@if (view.mode === 'day') {\n <div\n class=\"mb-1 px-2 d-flex\">\n @for (day of weekDays; track day) {\n <h3\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n }\n </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n <div\n class=\"px-2 d-flex {{view.mode}}-view\"\n [class.mb-1]=\"!isLast\"\n [class.mb-2]=\"isLast\">\n @for (item of row; track trackByDate($index, item)) {\n <button\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n ec-calendar-item\n [item]=\"item\"\n [selection]=\"selection\"\n [view]=\"view\"\n (click)=\"onItemSelected(item)\"\n [innerHTML]=\"item.label\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n tabindex=\"{{tabindex}}\">\n </button>\n }\n </div>\n}\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}button:focus-visible{outline-color:var(--ec-border-color-focus)}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: CalendarItemComponent, selector: "button[ec-calendar-item]", inputs: ["item", "selection", "view", "minDate", "maxDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2074
2074
  }
2075
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarComponent, decorators: [{
2075
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CalendarComponent, decorators: [{
2076
2076
  type: Component,
2077
- args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n <button id=\"{{id}}_prev_button\"\n class=\"mr-auto\"\n (click)=\"onPreviousClick()\"\n [disabled]=\"disablePreviousButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n </button>\n\n @if (view.mode === 'day') {\n <button\n id=\"{{id}}_month_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onMonthClick()\"\n tabindex=\"{{tabindex}}\">\n {{month}}\n </button>\n }\n\n @if (view.mode !== 'year') {\n <button\n id=\"{{id}}_year_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onYearClick()\"\n tabindex=\"{{tabindex}}\">\n {{year}}\n </button>\n }\n\n @if (view.mode === 'year') {\n <div id=\"{{id}}_year_range\"\n class=\"text-body-1 font-weight-bold\"\n [innerHTML]=\"yearRange\">\n </div>\n }\n\n <button id=\"{{id}}_next_button\"\n class=\"ml-auto\"\n (click)=\"onNextClick()\"\n [disabled]=\"disableNextButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n </button>\n</header>\n\n@if (view.mode === 'day') {\n <div\n class=\"mb-1 px-2 d-flex\">\n @for (day of weekDays; track day) {\n <h3\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n }\n </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n <div\n class=\"px-2 d-flex {{view.mode}}-view\"\n [class.mb-1]=\"!isLast\"\n [class.mb-2]=\"isLast\">\n @for (item of row; track trackByDate($index, item)) {\n <button\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n ec-calendar-item\n [item]=\"item\"\n [selection]=\"selection\"\n [view]=\"view\"\n (click)=\"onItemSelected(item)\"\n [innerHTML]=\"item.label\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n tabindex=\"{{tabindex}}\">\n </button>\n }\n </div>\n}\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
2077
+ args: [{ selector: 'ec-calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<header class=\"d-flex align-items-center mt-1 mb-2 px-1\">\n <button id=\"{{id}}_prev_button\"\n class=\"mr-auto\"\n (click)=\"onPreviousClick()\"\n [disabled]=\"disablePreviousButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-90\"></i>\n </button>\n\n @if (view.mode === 'day') {\n <button\n id=\"{{id}}_month_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onMonthClick()\"\n tabindex=\"{{tabindex}}\">\n {{month}}\n </button>\n }\n\n @if (view.mode !== 'year') {\n <button\n id=\"{{id}}_year_button\"\n class=\"text-body-1 font-weight-bold\"\n (click)=\"onYearClick()\"\n tabindex=\"{{tabindex}}\">\n {{year}}\n </button>\n }\n\n @if (view.mode === 'year') {\n <div id=\"{{id}}_year_range\"\n class=\"text-body-1 font-weight-bold\"\n [innerHTML]=\"yearRange\">\n </div>\n }\n\n <button id=\"{{id}}_next_button\"\n class=\"ml-auto\"\n (click)=\"onNextClick()\"\n [disabled]=\"disableNextButton\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-angle-down rotate-270\"></i>\n </button>\n</header>\n\n@if (view.mode === 'day') {\n <div\n class=\"mb-1 px-2 d-flex\">\n @for (day of weekDays; track day) {\n <h3\n class=\"text-heading-3 d-flex justify-content-center align-items-center\"\n style=\"width: 2rem; height: 1.75rem;\">{{day}}</h3>\n }\n </div>\n}\n\n@for (row of calendarItems; track trackByDateRow($index, row); let isLast = $last) {\n <div\n class=\"px-2 d-flex {{view.mode}}-view\"\n [class.mb-1]=\"!isLast\"\n [class.mb-2]=\"isLast\">\n @for (item of row; track trackByDate($index, item)) {\n <button\n id=\"{{id}}_item_{{item.date | date:'MM_dd_yyyy'}}\"\n ec-calendar-item\n [item]=\"item\"\n [selection]=\"selection\"\n [view]=\"view\"\n (click)=\"onItemSelected(item)\"\n [innerHTML]=\"item.label\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n tabindex=\"{{tabindex}}\">\n </button>\n }\n </div>\n}\n", styles: [":host{display:inline-block}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}button:focus-visible{outline-color:var(--ec-border-color-focus)}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{background-color:transparent}button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}.day-view button{width:2rem;height:1.75rem}.month-view button{width:4.67rem;height:3.25rem}.quarter-view button{width:7rem;height:6.75rem}.year-view button{width:3.5rem;height:3.25rem}.is-selected:has(+.is-selected:not(:disabled)){border-top-right-radius:0;border-bottom-right-radius:0}.is-selected:not(:disabled)+.is-selected{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
2078
2078
  }], propDecorators: { id: [{
2079
2079
  type: HostBinding,
2080
2080
  args: ['attr.id']
@@ -2268,10 +2268,10 @@ class ValidationMessageService {
2268
2268
  return this.translate.get('TextboxRequired_LC', { minLength: error.minLength, maxLength: error.maxLength });
2269
2269
  }
2270
2270
  }
2271
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationMessageService, deps: [{ token: i3.TranslateService }, { token: DateDisplayPipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
2272
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationMessageService, providedIn: 'root' }); }
2271
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValidationMessageService, deps: [{ token: i3.TranslateService }, { token: DateDisplayPipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
2272
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValidationMessageService, providedIn: 'root' }); }
2273
2273
  }
2274
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ValidationMessageService, decorators: [{
2274
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValidationMessageService, decorators: [{
2275
2275
  type: Injectable,
2276
2276
  args: [{
2277
2277
  providedIn: 'root'
@@ -2332,10 +2332,10 @@ class FormGroupHelper {
2332
2332
  control.updateValueAndValidity({ emitEvent: false });
2333
2333
  };
2334
2334
  }
2335
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormGroupHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2336
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormGroupHelper, providedIn: 'root' }); }
2335
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
2336
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupHelper, providedIn: 'root' }); }
2337
2337
  }
2338
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormGroupHelper, decorators: [{
2338
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupHelper, decorators: [{
2339
2339
  type: Injectable,
2340
2340
  args: [{
2341
2341
  providedIn: 'root'
@@ -2456,10 +2456,10 @@ class FormControlBase {
2456
2456
  }
2457
2457
  }
2458
2458
  }
2459
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlBase, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
2460
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: FormControlBase, isStandalone: true, inputs: { autofocus: "autofocus", formModel: "formModel", label: "label", labelPosition: "labelPosition", id: "id", pending: "pending", required: "required", tabindex: "tabindex", readonly: "readonly", tooltip: "tooltip", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, usesOnChanges: true, ngImport: i0 }); }
2459
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlBase, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Directive }); }
2460
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FormControlBase, isStandalone: true, inputs: { autofocus: "autofocus", formModel: "formModel", label: "label", labelPosition: "labelPosition", id: "id", pending: "pending", required: "required", tabindex: "tabindex", readonly: "readonly", tooltip: "tooltip", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, usesOnChanges: true, ngImport: i0 }); }
2461
2461
  }
2462
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlBase, decorators: [{
2462
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlBase, decorators: [{
2463
2463
  type: Directive
2464
2464
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { autofocus: [{
2465
2465
  type: Input
@@ -2497,12 +2497,12 @@ class TooltipComponent {
2497
2497
  this.onHide.next();
2498
2498
  this.overlayRef?.dispose();
2499
2499
  }
2500
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2501
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
2500
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2501
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2502
2502
  }
2503
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, decorators: [{
2503
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipComponent, decorators: [{
2504
2504
  type: Component,
2505
- args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
2505
+ args: [{ selector: 'ec-tooltip', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<article id=\"{{id}}\" role=\"tooltip\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"] }]
2506
2506
  }], propDecorators: { backgroundColor: [{
2507
2507
  type: HostBinding,
2508
2508
  args: ['style.--ec-tooltip-background-color']
@@ -2573,10 +2573,10 @@ class TooltipService {
2573
2573
  });
2574
2574
  return config;
2575
2575
  }
2576
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipService, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
2577
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
2576
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipService, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
2577
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
2578
2578
  }
2579
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipService, decorators: [{
2579
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipService, decorators: [{
2580
2580
  type: Injectable,
2581
2581
  args: [{
2582
2582
  providedIn: 'root'
@@ -2663,10 +2663,10 @@ class HighlightTextPipe {
2663
2663
  escapeRegex(value) {
2664
2664
  return value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
2665
2665
  }
2666
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HighlightTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
2667
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: HighlightTextPipe, isStandalone: false, name: "highlightText" }); }
2666
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HighlightTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
2667
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HighlightTextPipe, isStandalone: false, name: "highlightText" }); }
2668
2668
  }
2669
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HighlightTextPipe, decorators: [{
2669
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HighlightTextPipe, decorators: [{
2670
2670
  type: Pipe,
2671
2671
  args: [{
2672
2672
  name: 'highlightText',
@@ -2737,12 +2737,12 @@ class TagsComponent {
2737
2737
  this.tagsArray = this.tagsArray.filter(t => t !== tag);
2738
2738
  this.tagClosed.emit(tag);
2739
2739
  }
2740
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2741
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText", highlightNormalizePattern: "highlightNormalizePattern" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }] }); }
2740
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2741
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText", highlightNormalizePattern: "highlightNormalizePattern" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2742
2742
  }
2743
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TagsComponent, decorators: [{
2743
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagsComponent, decorators: [{
2744
2744
  type: Component,
2745
- args: [{ selector: 'ec-tags', standalone: false, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
2745
+ args: [{ selector: 'ec-tags', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
2746
2746
  }], ctorParameters: () => [], propDecorators: { id: [{
2747
2747
  type: Input
2748
2748
  }], tags: [{
@@ -2872,12 +2872,12 @@ class PopoverComponent {
2872
2872
  const overlayY = position[0];
2873
2873
  return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
2874
2874
  }
2875
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
2876
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass", ariaLabel: "ariaLabel" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }] }); }
2875
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
2876
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass", ariaLabel: "ariaLabel" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2877
2877
  }
2878
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, decorators: [{
2878
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PopoverComponent, decorators: [{
2879
2879
  type: Component,
2880
- args: [{ selector: 'ec-popover', standalone: false, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
2880
+ args: [{ selector: 'ec-popover', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
2881
2881
  }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: TooltipService }, { type: i3.TranslateService }], propDecorators: { icon: [{
2882
2882
  type: Input
2883
2883
  }], tag: [{
@@ -2914,12 +2914,12 @@ class HelpPopoverComponent {
2914
2914
  this.contentPosition = 'top-left';
2915
2915
  this.maxWidth = '15rem';
2916
2916
  }
2917
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2918
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass", "ariaLabel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
2917
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2918
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass", "ariaLabel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
2919
2919
  }
2920
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HelpPopoverComponent, decorators: [{
2920
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HelpPopoverComponent, decorators: [{
2921
2921
  type: Component,
2922
- args: [{ selector: 'ec-help-popover', standalone: false, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>" }]
2922
+ args: [{ selector: 'ec-help-popover', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>" }]
2923
2923
  }], ctorParameters: () => [], propDecorators: { id: [{
2924
2924
  type: Input
2925
2925
  }, {
@@ -3049,12 +3049,12 @@ class CheckboxComponent extends FormControlBase {
3049
3049
  this.indeterminate = false;
3050
3050
  }
3051
3051
  }
3052
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
3053
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", icon: "icon", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\n <label class=\"checkbox\"\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n <input id=\"{{id}}_input\"\n #checkboxInput\n class='input'\n [class.indeterminate]=\"indeterminate\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n type=\"checkbox\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n <i class=\"ec-icon icon-check\"></i>\n\n @if (icon) {\n <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n }\n\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">\n <span [innerHtml]=\"label | translate\"></span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n2 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </span>\n }\n </label>\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.ec-icon{align-self:center}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.ec-icon.icon-check{margin-top:0}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
3052
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
3053
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CheckboxComponent, isStandalone: false, selector: "ec-checkbox", inputs: { name: "name", icon: "icon", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\n <label class=\"checkbox\"\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n <input id=\"{{id}}_input\"\n #checkboxInput\n class='input'\n [class.indeterminate]=\"indeterminate\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n type=\"checkbox\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n <i class=\"ec-icon icon-check\"></i>\n\n @if (icon) {\n <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n }\n\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">\n <span [innerHtml]=\"label | translate\"></span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n2 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </span>\n }\n </label>\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.ec-icon{align-self:center}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.ec-icon.icon-check{margin-top:0}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3054
3054
  }
3055
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
3055
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CheckboxComponent, decorators: [{
3056
3056
  type: Component,
3057
- args: [{ selector: 'ec-checkbox', standalone: false, template: "<div class=\"control\">\n <label class=\"checkbox\"\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n <input id=\"{{id}}_input\"\n #checkboxInput\n class='input'\n [class.indeterminate]=\"indeterminate\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n type=\"checkbox\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n <i class=\"ec-icon icon-check\"></i>\n\n @if (icon) {\n <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n }\n\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">\n <span [innerHtml]=\"label | translate\"></span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n2 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </span>\n }\n </label>\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.ec-icon{align-self:center}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.ec-icon.icon-check{margin-top:0}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input{margin-top:0}\n"] }]
3057
+ args: [{ selector: 'ec-checkbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control\">\n <label class=\"checkbox\"\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\n <input id=\"{{id}}_input\"\n #checkboxInput\n class='input'\n [class.indeterminate]=\"indeterminate\"\n [attr.id]=\"inputId\"\n [attr.name]=\"name\"\n type=\"checkbox\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n <i class=\"ec-icon icon-check\"></i>\n\n @if (icon) {\n <i class=\"ec-icon {{icon}} pl-3 pr-1\" aria-hidden=\"true\"></i>\n }\n\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">\n <span [innerHtml]=\"label | translate\"></span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n2 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </span>\n }\n </label>\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.ec-icon{align-self:center}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-form-control-border-color)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.ec-icon{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.ec-icon{border-color:var(--ec-border-color-control-hover)}.ec-icon.icon-check{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon.icon-check:before{font-size:.6875em}.ec-icon.icon-check{margin-top:0}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-form-control-color)}.checkbox.is-readonly ec-help-popover{pointer-events:auto}.no-label .input{margin-top:0}\n"] }]
3058
3058
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { name: [{
3059
3059
  type: Input
3060
3060
  }], icon: [{
@@ -3087,12 +3087,12 @@ class CollapsibleToggleComponent {
3087
3087
  this.expanded = !this.expanded;
3088
3088
  this.expandedChange.emit(this.expanded);
3089
3089
  }
3090
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CollapsibleToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3091
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CollapsibleToggleComponent, isStandalone: false, selector: "ec-collapsible-toggle", inputs: { id: "id", expanded: "expanded", tabindex: "tabindex" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, isInline: true, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
3090
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CollapsibleToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3091
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: CollapsibleToggleComponent, isStandalone: false, selector: "ec-collapsible-toggle", inputs: { id: "id", expanded: "expanded", tabindex: "tabindex" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, isInline: true, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
3092
3092
  }
3093
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CollapsibleToggleComponent, decorators: [{
3093
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CollapsibleToggleComponent, decorators: [{
3094
3094
  type: Component,
3095
- args: [{ selector: 'ec-collapsible-toggle', template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, standalone: false, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"] }]
3095
+ args: [{ selector: 'ec-collapsible-toggle', template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"] }]
3096
3096
  }], propDecorators: { id: [{
3097
3097
  type: Input
3098
3098
  }], expanded: [{
@@ -3351,10 +3351,10 @@ class WindowService {
3351
3351
  reloadWindow() {
3352
3352
  window.location.reload();
3353
3353
  }
3354
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WindowService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
3355
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WindowService, providedIn: 'root' }); }
3354
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WindowService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
3355
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WindowService, providedIn: 'root' }); }
3356
3356
  }
3357
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WindowService, decorators: [{
3357
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WindowService, decorators: [{
3358
3358
  type: Injectable,
3359
3359
  args: [{
3360
3360
  providedIn: 'root'
@@ -3438,10 +3438,10 @@ class ScrollService {
3438
3438
  console.error(`Error scrolling target into view. Container selector: ${scrollContainerSelector}. Target selector: ${targetElementSelector}`, error);
3439
3439
  }
3440
3440
  }
3441
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3442
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
3441
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3442
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollService, providedIn: 'root' }); }
3443
3443
  }
3444
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ScrollService, decorators: [{
3444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollService, decorators: [{
3445
3445
  type: Injectable,
3446
3446
  args: [{
3447
3447
  providedIn: 'root'
@@ -3510,10 +3510,10 @@ class NavItemActiveDirective {
3510
3510
  }
3511
3511
  }
3512
3512
  }
3513
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive }); }
3514
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NavItemActiveDirective, isStandalone: false, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 }); }
3513
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1$2.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive }); }
3514
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: NavItemActiveDirective, isStandalone: false, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 }); }
3515
3515
  }
3516
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NavItemActiveDirective, decorators: [{
3516
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavItemActiveDirective, decorators: [{
3517
3517
  type: Directive,
3518
3518
  args: [{
3519
3519
  selector: '[ecNavItemActive]',
@@ -4034,12 +4034,12 @@ class MenuComponent {
4034
4034
  });
4035
4035
  }
4036
4036
  }
4037
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
4038
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MenuComponent, isStandalone: false, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", rolePattern: "rolePattern", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", highlightedItemChange: "highlightedItemChange", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
4037
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
4038
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MenuComponent, isStandalone: false, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", rolePattern: "rolePattern", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", highlightedItemChange: "highlightedItemChange", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"$safeNavigationMigration(selected?.items)\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:2px solid transparent;outline-offset:-2px;background-color:var(--ec-background-color-selected);position:relative;z-index:1}ul li:focus-visible .item-wrapper{outline-color:var(--ec-border-color-focus)}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4039
4039
  }
4040
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuComponent, decorators: [{
4040
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuComponent, decorators: [{
4041
4041
  type: Component,
4042
- args: [{ selector: 'ec-menu', standalone: false, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
4042
+ args: [{ selector: 'ec-menu', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"$safeNavigationMigration(selected?.items)\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:2px solid transparent;outline-offset:-2px;background-color:var(--ec-background-color-selected);position:relative;z-index:1}ul li:focus-visible .item-wrapper{outline-color:var(--ec-border-color-focus)}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
4043
4043
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }], propDecorators: { id: [{
4044
4044
  type: Input
4045
4045
  }], attrId: [{
@@ -4239,10 +4239,10 @@ class PopupContainerDirective {
4239
4239
  }
4240
4240
  }
4241
4241
  }
4242
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopupContainerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
4243
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: PopupContainerDirective, isStandalone: false, selector: "[ecPopup]", inputs: { popup: ["ecPopup", "popup"], popperOptions: ["options", "popperOptions"] }, ngImport: i0 }); }
4242
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PopupContainerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
4243
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: PopupContainerDirective, isStandalone: false, selector: "[ecPopup]", inputs: { popup: ["ecPopup", "popup"], popperOptions: ["options", "popperOptions"] }, ngImport: i0 }); }
4244
4244
  }
4245
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopupContainerDirective, decorators: [{
4245
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PopupContainerDirective, decorators: [{
4246
4246
  type: Directive,
4247
4247
  args: [{
4248
4248
  selector: '[ecPopup]',
@@ -4377,12 +4377,12 @@ class TextboxComponent extends FormControlBase {
4377
4377
  this.formModel.setValue(this.formModel.value.toUpperCase().trim());
4378
4378
  }
4379
4379
  }
4380
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
4381
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TextboxComponent, isStandalone: false, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'is-readonly': readonly}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors |\n translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"input-wrapper control-input\">\n @if (type !== 'multi_line') {\n <input\n #textboxInput\n email=\"{{type === 'email' ? true : false}}\"\n pattern=\"{{validationPattern}}\"\n type=\"{{type}}\"\n tabindex=\"{{tabindex}}\"\n title=\"{{tooltip}}\"\n [attr.id]=\"inputId\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n (focusout)=\"focusOutEvent()\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n }\n\n @if (type === 'multi_line') {\n <textarea\n [attr.rows]=\"rows\"\n #textboxInput\n tabindex=\"{{tabindex}}\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n </textarea>\n }\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n <i class=\"ec-icon icon-loading\"></i>\n </div>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
4380
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
4381
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TextboxComponent, isStandalone: false, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'is-readonly': readonly}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors |\n translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"input-wrapper control-input\">\n @if (type !== 'multi_line') {\n <input\n #textboxInput\n email=\"{{type === 'email' ? true : false}}\"\n pattern=\"{{validationPattern}}\"\n type=\"{{type}}\"\n tabindex=\"{{tabindex}}\"\n title=\"{{tooltip}}\"\n [attr.id]=\"inputId\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n (focusout)=\"focusOutEvent()\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n }\n\n @if (type === 'multi_line') {\n <textarea\n [attr.rows]=\"rows\"\n #textboxInput\n tabindex=\"{{tabindex}}\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n </textarea>\n }\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n <i class=\"ec-icon icon-loading\"></i>\n </div>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4382
4382
  }
4383
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TextboxComponent, decorators: [{
4383
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TextboxComponent, decorators: [{
4384
4384
  type: Component,
4385
- args: [{ selector: 'ec-textbox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'is-readonly': readonly}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors |\n translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"input-wrapper control-input\">\n @if (type !== 'multi_line') {\n <input\n #textboxInput\n email=\"{{type === 'email' ? true : false}}\"\n pattern=\"{{validationPattern}}\"\n type=\"{{type}}\"\n tabindex=\"{{tabindex}}\"\n title=\"{{tooltip}}\"\n [attr.id]=\"inputId\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n (focusout)=\"focusOutEvent()\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n }\n\n @if (type === 'multi_line') {\n <textarea\n [attr.rows]=\"rows\"\n #textboxInput\n tabindex=\"{{tabindex}}\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n </textarea>\n }\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n <i class=\"ec-icon icon-loading\"></i>\n </div>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
4385
+ args: [{ selector: 'ec-textbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'is-readonly': readonly}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors |\n translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"input-wrapper control-input\">\n @if (type !== 'multi_line') {\n <input\n #textboxInput\n email=\"{{type === 'email' ? true : false}}\"\n pattern=\"{{validationPattern}}\"\n type=\"{{type}}\"\n tabindex=\"{{tabindex}}\"\n title=\"{{tooltip}}\"\n [attr.id]=\"inputId\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\n (focusout)=\"focusOutEvent()\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n }\n\n @if (type === 'multi_line') {\n <textarea\n [attr.rows]=\"rows\"\n #textboxInput\n tabindex=\"{{tabindex}}\"\n [attr.id]=\"inputId\"\n [attr.placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.required]=\"required ? required : null\"\n [formControl]=\"formModel\"\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n </textarea>\n }\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n <i class=\"ec-icon icon-loading\"></i>\n </div>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.ng-invalid.ng-touched{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{resize:none;display:block}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:1px}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus,:host(.textbox-group-input:not(:last-child)) input:hover:not(:disabled){position:relative;z-index:1;border-right-width:1px}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
4386
4386
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }], propDecorators: { autocomplete: [{
4387
4387
  type: Input
4388
4388
  }], type: [{
@@ -4406,12 +4406,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
4406
4406
 
4407
4407
  /** Exposes the markup and styles that represent the spinner. No inputs or outputs defined because it is just a visual component*/
4408
4408
  class SpinnerComponent {
4409
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4410
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\" role=\"status\" [attr.aria-label]=\"'Loading' | translate\">\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
4409
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4410
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SpinnerComponent, isStandalone: false, selector: "ec-spinner", ngImport: i0, template: "<div class=\"spinner\" role=\"status\" [attr.aria-label]=\"'Loading' | translate\">\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4411
4411
  }
4412
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SpinnerComponent, decorators: [{
4412
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SpinnerComponent, decorators: [{
4413
4413
  type: Component,
4414
- args: [{ selector: 'ec-spinner', standalone: false, template: "<div class=\"spinner\" role=\"status\" [attr.aria-label]=\"'Loading' | translate\">\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }]
4414
+ args: [{ selector: 'ec-spinner', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"spinner\" role=\"status\" [attr.aria-label]=\"'Loading' | translate\">\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n <span class=\"spinner-dot\" aria-hidden=\"true\"></span>\n</div>\n", styles: ["@keyframes bblFadInOut{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.spinner{display:flex;gap:7px;align-items:center}.spinner-dot{width:17.5px;height:17.5px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}:host(.spinner-small) .spinner{display:flex;gap:3.2px;align-items:center}:host(.spinner-small) .spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--ec-spinner-color, var(--ec-color-brand-black));animation:bblFadInOut 1.8s infinite ease-in-out both;flex-shrink:0}:host(.spinner-small) .spinner-dot:nth-child(1){animation-delay:-.32s}:host(.spinner-small) .spinner-dot:nth-child(2){animation-delay:-.16s}:host(.spinner-small) .spinner-dot:nth-child(3){animation-delay:0s}\n"] }]
4415
4415
  }] });
4416
4416
 
4417
4417
  class Overlay {
@@ -4446,12 +4446,12 @@ class ViewOverlayComponent {
4446
4446
  this.action.onClick(event);
4447
4447
  }
4448
4448
  }
4449
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4450
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"action?.icon\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"action?.label\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
4449
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4450
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"$safeNavigationMigration(action?.icon)\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"$safeNavigationMigration(action?.label)\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
4451
4451
  }
4452
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, decorators: [{
4452
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ViewOverlayComponent, decorators: [{
4453
4453
  type: Component,
4454
- args: [{ selector: '[ecOverlay]', standalone: false, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"action?.icon\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"action?.label\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
4454
+ args: [{ selector: '[ecOverlay]', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n [attr.role]=\"status === 'error' ? 'alert' : (status === 'pending' ? null : 'status')\"\n [attr.aria-live]=\"status === 'error' ? 'assertive' : (status === 'pending' ? null : 'polite')\"\n [attr.aria-atomic]=\"status === 'pending' ? null : 'true'\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"$safeNavigationMigration(action?.icon)\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"$safeNavigationMigration(action?.label)\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
4455
4455
  }], propDecorators: { status: [{
4456
4456
  type: Input
4457
4457
  }], message: [{
@@ -5188,12 +5188,12 @@ class ComboboxComponent extends FormControlBase {
5188
5188
  }
5189
5189
  return index;
5190
5190
  }
5191
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
5192
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", caseSensitive: "caseSensitive" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"-1\"\n type=\"secondary\"\n [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
5191
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
5192
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", caseSensitive: "caseSensitive" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"-1\"\n type=\"secondary\"\n [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
5193
5193
  }
5194
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, decorators: [{
5194
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComboboxComponent, decorators: [{
5195
5195
  type: Component,
5196
- args: [{ selector: 'ec-combobox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"-1\"\n type=\"secondary\"\n [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
5196
+ args: [{ selector: 'ec-combobox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"-1\"\n type=\"secondary\"\n [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
5197
5197
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
5198
5198
  type: HostListener,
5199
5199
  args: ['window:resize']
@@ -5310,12 +5310,12 @@ class FormControlComponent {
5310
5310
  clear() {
5311
5311
  this._formModel?.reset();
5312
5312
  }
5313
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
5314
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormControlComponent, isStandalone: false, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", tabindex: "tabindex", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n <button\n id=\"{{id + '_clear'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-clear\"\n (click)=\"clear()\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-cancel\"></i>\n </button>\n}\n@if (actionIcon) {\n <button\n id=\"{{id + '_action'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-action\"\n (click)=\"actionClicked.emit($event)\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon {{actionIcon}}\"></i>\n </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
5313
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
5314
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FormControlComponent, isStandalone: false, selector: "ec-form-control", inputs: { id: "id", icon: "icon", actionIcon: "actionIcon", showClear: "showClear", formModelInput: ["formModel", "formModelInput"], autofocus: "autofocus", tabindex: "tabindex", pending: "pending", required: "required", readonly: "readonly" }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "class.is-pending": "this.pending", "class.is-required": "this.required", "class.is-readonly": "this.readonly", "class.is-empty": "this.empty", "class.is-invalid": "this.invalid", "class.is-disabled": "this.disabled" } }, queries: [{ propertyName: "formControlDirective", first: true, predicate: FormControlDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n <button\n id=\"{{id + '_clear'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-clear\"\n (click)=\"clear()\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-cancel\"></i>\n </button>\n}\n@if (actionIcon) {\n <button\n id=\"{{id + '_action'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-action\"\n (click)=\"actionClicked.emit($event)\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon {{actionIcon}}\"></i>\n </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ec-form-control .ec-form-control-clear:focus-visible,ec-form-control .ec-form-control-action:focus-visible{outline-color:var(--ec-border-color-focus)}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
5315
5315
  }
5316
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlComponent, decorators: [{
5316
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlComponent, decorators: [{
5317
5317
  type: Component,
5318
- args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n <button\n id=\"{{id + '_clear'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-clear\"\n (click)=\"clear()\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-cancel\"></i>\n </button>\n}\n@if (actionIcon) {\n <button\n id=\"{{id + '_action'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-action\"\n (click)=\"actionClicked.emit($event)\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon {{actionIcon}}\"></i>\n </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:none;position:relative;z-index:1}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"] }]
5318
+ args: [{ selector: 'ec-form-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ng-content></ng-content>\n<i id=\"{{id + '_icon'}}\" class=\"ec-form-control-icon ec-icon {{icon}}\"></i>\n<i id=\"{{id + '_loading'}}\" class=\"ec-form-control-icon ec-icon icon-loading\"></i>\n<i id=\"{{id + '_required'}}\" class=\"ec-form-control-icon ec-icon icon-required\"></i>\n<i id=\"{{id + '_invalid'}}\" class=\"ec-form-control-icon ec-icon icon-invalid\"></i>\n@if (showClear) {\n <button\n id=\"{{id + '_clear'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-clear\"\n (click)=\"clear()\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon icon-cancel\"></i>\n </button>\n}\n@if (actionIcon) {\n <button\n id=\"{{id + '_action'}}\"\n [attr.disabled]=\"disabled || undefined\"\n class=\"ec-form-control-action\"\n (click)=\"actionClicked.emit($event)\"\n tabindex=\"{{tabindex}}\">\n <i class=\"ec-icon {{actionIcon}}\"></i>\n </button>\n}\n<div class=\"ec-focus-ring\"></div>\n", styles: ["ec-form-control{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);padding:0 .5rem;position:relative;color:var(--ec-form-control-color);display:flex;font-size:var(--ec-form-control-font-size);min-height:2rem;width:100%}ec-form-control>input,ec-form-control>select,ec-form-control>textarea,ec-form-control>div[contenteditable=true]{color:inherit;flex:1 1;min-width:0;border:0;background-color:transparent;order:2}ec-form-control>input::selection,ec-form-control>select::selection,ec-form-control>textarea::selection,ec-form-control>div[contenteditable=true]::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}ec-form-control>input::-webkit-input-placeholder,ec-form-control>select::-webkit-input-placeholder,ec-form-control>textarea::-webkit-input-placeholder,ec-form-control>div[contenteditable=true]::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input::-moz-placeholder,ec-form-control>select::-moz-placeholder,ec-form-control>textarea::-moz-placeholder,ec-form-control>div[contenteditable=true]::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:-ms-input-placeholder,ec-form-control>select:-ms-input-placeholder,ec-form-control>textarea:-ms-input-placeholder,ec-form-control>div[contenteditable=true]:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}ec-form-control>input:-moz-placeholder,ec-form-control>select:-moz-placeholder,ec-form-control>textarea:-moz-placeholder,ec-form-control>div[contenteditable=true]:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}ec-form-control>input:focus,ec-form-control>select:focus,ec-form-control>textarea:focus,ec-form-control>div[contenteditable=true]:focus{outline:none}ec-form-control>input:focus~.ec-focus-ring,ec-form-control>select:focus~.ec-focus-ring,ec-form-control>textarea:focus~.ec-focus-ring,ec-form-control>div[contenteditable=true]:focus~.ec-focus-ring{display:block}ec-form-control>input,ec-form-control>textarea,ec-form-control>select,ec-form-control>div[contenteditable=true],ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{padding:calc((1.875rem - var(--ec-font-size-body) * 1.25) / 2) 0;line-height:1.25;font-size:inherit}ec-form-control>textarea{resize:none;padding:.3125rem 0}ec-form-control .ec-form-control-icon{margin-top:.4375rem;margin-right:.25rem;order:1}ec-form-control .ec-form-control-icon:not([class*=icon-]){display:none}ec-form-control .icon-required,ec-form-control .icon-invalid{color:var(--ec-form-control-border-color-invalid)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ec-form-control .ec-form-control-clear .label,ec-form-control .ec-form-control-action .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ec-form-control .ec-form-control-clear .ec-icon,ec-form-control .ec-form-control-action .ec-icon{flex:none}ec-form-control .ec-form-control-clear .ec-icon+.label,ec-form-control .ec-form-control-action .ec-icon+.label{flex:none;margin-left:.25rem}ec-form-control .ec-form-control-clear.has-badge,ec-form-control .ec-form-control-action.has-badge{padding-right:.0625rem}ec-form-control .ec-form-control-clear:focus,ec-form-control .ec-form-control-action:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ec-form-control .ec-form-control-clear:focus-visible,ec-form-control .ec-form-control-action:focus-visible{outline-color:var(--ec-border-color-focus)}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ec-form-control .ec-form-control-clear:disabled .ec-icon,ec-form-control .ec-form-control-action:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ec-form-control .ec-form-control-clear,ec-form-control .ec-form-control-action{flex:none;height:1.875rem;width:2rem;order:3;background-color:transparent;border:0;border-radius:0;display:inline-flex;align-items:center;justify-content:center;outline:none}ec-form-control .ec-form-control-clear:disabled,ec-form-control .ec-form-control-action:disabled{border:0;background-color:transparent;border-color:transparent}ec-form-control .ec-form-control-clear:last-of-type,ec-form-control .ec-form-control-action:last-of-type{margin-right:-.5rem}ec-form-control .ec-form-control-clear:hover:not(:disabled),ec-form-control .ec-form-control-action:hover:not(:disabled){cursor:pointer;background-color:var(--ec-background-color-hover)}ec-form-control .ec-form-control-clear:active:not(:disabled),ec-form-control .ec-form-control-action:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ec-form-control .ec-form-control-clear:focus:not(:disabled),ec-form-control .ec-form-control-action:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ec-form-control button:last-of-type{border-top-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem);border-bottom-right-radius:calc(var(--ec-form-control-border-radius) - .0625rem)}ec-form-control .ec-form-control-clear{width:1.5rem}ec-form-control .ec-form-control-prefix,ec-form-control .ec-form-control-suffix{color:var(--ec-color-secondary-dark);flex:none;cursor:default}ec-form-control .ec-form-control-prefix{margin-right:.125rem;order:2}ec-form-control .ec-form-control-suffix{margin-left:.125rem;order:3}ec-form-control .ec-focus-ring{position:absolute;inset:-1px;border:.125rem solid var(--ec-color-interactive);pointer-events:none;display:none;border-radius:var(--ec-form-control-border-radius);z-index:1}ec-form-control.is-pending .icon-invalid,ec-form-control.is-pending .icon-required{display:none}ec-form-control.is-invalid{border-color:var(--ec-form-control-border-color-invalid);background-color:var(--ec-form-control-background-color-invalid)}ec-form-control.is-invalid .icon-required{display:none}ec-form-control.is-empty .ec-form-control-clear{display:none}ec-form-control.is-required.is-empty .ec-form-control-icon:first-of-type{display:none}ec-form-control:not(.is-pending) .icon-loading{display:none}ec-form-control:not(.is-required) .icon-required,ec-form-control:not(.is-empty) .icon-required{display:none}ec-form-control:not(.is-invalid) .icon-invalid{display:none}ec-form-control.is-readonly,ec-form-control.is-disabled{background-color:var(--ec-form-control-background-color-disabled)}ec-form-control.is-readonly .icon-loading,ec-form-control.is-readonly .icon-invalid,ec-form-control.is-readonly .icon-required,ec-form-control.is-readonly .ec-form-control-clear,ec-form-control.is-disabled .icon-loading,ec-form-control.is-disabled .icon-invalid,ec-form-control.is-disabled .icon-required,ec-form-control.is-disabled .ec-form-control-clear{display:none}ec-form-control.is-readonly{border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly)}ec-form-control.is-readonly .ec-form-control-action{display:none}ec-form-control.is-disabled:not(.is-readonly){color:var(--ec-form-control-color-disabled);opacity:.6}ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-prefix,ec-form-control.is-disabled:not(.is-readonly) .ec-form-control-suffix{color:inherit}ec-form-control:hover:not(.is-disabled):not(.is-readonly){border-color:var(--ec-form-control-border-color-hover)}\n"] }]
5319
5319
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { formControlDirective: [{
5320
5320
  type: ContentChild,
5321
5321
  args: [FormControlDirective]
@@ -5436,10 +5436,10 @@ class KeyboardNavContainerDirective {
5436
5436
  this.endAnchor.removeAttribute('tabindex');
5437
5437
  }
5438
5438
  }
5439
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KeyboardNavContainerDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1$3.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Directive }); }
5440
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: KeyboardNavContainerDirective, isStandalone: false, selector: "[ecKeyboardNavContainer]", inputs: { enabled: ["ecKeyboardNavContainer", "enabled"], tabindex: "tabindex" }, outputs: { focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, exportAs: ["ecKeyboardNavContainer"], usesOnChanges: true, ngImport: i0 }); }
5439
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: KeyboardNavContainerDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i1$3.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Directive }); }
5440
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: KeyboardNavContainerDirective, isStandalone: false, selector: "[ecKeyboardNavContainer]", inputs: { enabled: ["ecKeyboardNavContainer", "enabled"], tabindex: "tabindex" }, outputs: { focusOutStart: "focusOutStart", focusOutEnd: "focusOutEnd" }, exportAs: ["ecKeyboardNavContainer"], usesOnChanges: true, ngImport: i0 }); }
5441
5441
  }
5442
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KeyboardNavContainerDirective, decorators: [{
5442
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: KeyboardNavContainerDirective, decorators: [{
5443
5443
  type: Directive,
5444
5444
  args: [{
5445
5445
  selector: '[ecKeyboardNavContainer]',
@@ -5880,12 +5880,12 @@ class DateInputComponent extends FormControlBase {
5880
5880
  }
5881
5881
  return null;
5882
5882
  }
5883
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: i0.ElementRef }, { token: i1$1.Overlay }, { token: DateInput.SelectionStrategies }], target: i0.ɵɵFactoryTarget.Component }); }
5884
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n}\n\n<div class=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">&ndash;</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
5883
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: i0.ElementRef }, { token: i1$1.Overlay }, { token: DateInput.SelectionStrategies }], target: i0.ɵɵFactoryTarget.Component }); }
5884
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n}\n\n<div class=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">&ndash;</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ul.selection-mode-menu li button:focus-visible{outline-color:var(--ec-border-color-focus)}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
5885
5885
  }
5886
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateInputComponent, decorators: [{
5886
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateInputComponent, decorators: [{
5887
5887
  type: Component,
5888
- args: [{ selector: 'ec-date-input', providers: [DateInput.SelectionStrategies], standalone: false, template: "@if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n}\n\n<div class=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">&ndash;</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"] }]
5888
+ args: [{ selector: 'ec-date-input', providers: [DateInput.SelectionStrategies], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n}\n\n<div class=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">&ndash;</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}ul.selection-mode-menu li button:focus-visible{outline-color:var(--ec-border-color-focus)}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"] }]
5889
5889
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: UserPreferenceService }, { type: i0.ElementRef }, { type: i1$1.Overlay }, { type: DateInput.SelectionStrategies }], propDecorators: { id: [{
5890
5890
  type: HostBinding,
5891
5891
  args: ['attr.id']
@@ -6080,12 +6080,12 @@ class DropdownComponent {
6080
6080
  return;
6081
6081
  }
6082
6082
  }
6083
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6084
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DropdownComponent, isStandalone: false, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", ariaLabel: "ariaLabel", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, host: { properties: { "class.is-pending": "this.pending" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? highlightedItem?.id : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }] }); }
6083
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6084
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DropdownComponent, isStandalone: false, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", ariaLabel: "ariaLabel", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, host: { properties: { "class.is-pending": "this.pending" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? $safeNavigationMigration(highlightedItem?.id) : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
6085
6085
  }
6086
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
6086
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DropdownComponent, decorators: [{
6087
6087
  type: Component,
6088
- args: [{ selector: 'ec-dropdown', standalone: false, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? highlightedItem?.id : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"] }]
6088
+ args: [{ selector: 'ec-dropdown', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? $safeNavigationMigration(highlightedItem?.id) : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"] }]
6089
6089
  }], ctorParameters: () => [], propDecorators: { id: [{
6090
6090
  type: Input
6091
6091
  }], autofocus: [{
@@ -6374,12 +6374,12 @@ class FormGroupComponent {
6374
6374
  this.validationErrors = '';
6375
6375
  }
6376
6376
  }
6377
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormGroupComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
6378
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormGroupComponent, isStandalone: false, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.ec-untouched]=\"formGroup?.untouched\">\n\n @if (label) {\n <label>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <ng-content></ng-content>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
6377
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
6378
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FormGroupComponent, isStandalone: false, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage", helpPopover: "helpPopover", helpPopoverPosition: "helpPopoverPosition" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.ec-untouched]=\"formGroup?.untouched\">\n\n @if (label) {\n <label>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <ng-content></ng-content>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
6379
6379
  }
6380
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormGroupComponent, decorators: [{
6380
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupComponent, decorators: [{
6381
6381
  type: Component,
6382
- args: [{ selector: 'ec-form-group', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.ec-untouched]=\"formGroup?.untouched\">\n\n @if (label) {\n <label>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <ng-content></ng-content>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
6382
+ args: [{ selector: 'ec-form-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.ec-untouched]=\"formGroup?.untouched\">\n\n @if (label) {\n <label>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <ng-content></ng-content>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
6383
6383
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: i3.TranslateService }], propDecorators: { id: [{
6384
6384
  type: Input
6385
6385
  }], attrId: [{
@@ -6613,12 +6613,12 @@ class FileUploadComponent extends FormControlBase {
6613
6613
  await this.processFile(file);
6614
6614
  }
6615
6615
  }
6616
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
6617
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"formModel?.get('name')\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
6616
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
6617
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"$safeNavigationMigration(formModel?.get('name'))\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
6618
6618
  }
6619
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileUploadComponent, decorators: [{
6619
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, decorators: [{
6620
6620
  type: Component,
6621
- args: [{ selector: "ec-file-upload", standalone: false, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"formModel?.get('name')\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
6621
+ args: [{ selector: "ec-file-upload", changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"$safeNavigationMigration(formModel?.get('name'))\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
6622
6622
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { formModel: [{
6623
6623
  type: Input
6624
6624
  }], placeholder: [{
@@ -6765,12 +6765,12 @@ class FormControlLabelComponent {
6765
6765
  this.validationErrors = '';
6766
6766
  }
6767
6767
  }
6768
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlLabelComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
6769
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FormControlLabelComponent, isStandalone: false, selector: "ec-form-control-label", inputs: { id: "id", inputId: "inputId", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n @if (label) {\n <label [attr.for]=\"forId\" ngPreserveWhitespaces>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n <span>{{validationErrors | translate}}</span>\n }\n </label>\n }\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
6768
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlLabelComponent, deps: [{ token: ValidationMessageService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
6769
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FormControlLabelComponent, isStandalone: false, selector: "ec-form-control-label", inputs: { id: "id", inputId: "inputId", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n @if (label) {\n <label [attr.for]=\"forId\" ngPreserveWhitespaces>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n <span>{{validationErrors | translate}}</span>\n }\n </label>\n }\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
6770
6770
  }
6771
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FormControlLabelComponent, decorators: [{
6771
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlLabelComponent, decorators: [{
6772
6772
  type: Component,
6773
- args: [{ selector: 'ec-form-control-label', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n @if (label) {\n <label [attr.for]=\"forId\" ngPreserveWhitespaces>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n <span>{{validationErrors | translate}}</span>\n }\n </label>\n }\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
6773
+ args: [{ selector: 'ec-form-control-label', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\n @if (label) {\n <label [attr.for]=\"forId\" ngPreserveWhitespaces>\n <span id=\"{{id}}_label\">{{label | translate}}</span>\n @if (!hideValidationMessage && validationErrors && control?.touched && control?.invalid) {\n <span>{{validationErrors | translate}}</span>\n }\n </label>\n }\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
6774
6774
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: i3.TranslateService }], propDecorators: { id: [{
6775
6775
  type: Input
6776
6776
  }], inputId: [{
@@ -6823,12 +6823,12 @@ class TableLockedColumnComponent {
6823
6823
  this.borderLeft = this.options.border || false;
6824
6824
  }
6825
6825
  }
6826
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableLockedColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
6827
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TableLockedColumnComponent, isStandalone: false, selector: "[ecTableLockedColumn]", inputs: { options: ["ecTableLockedColumn", "options"] }, host: { properties: { "style.left.px": "this.left", "style.right.px": "this.right", "class.border-right": "this.borderRight", "class.border-left": "this.borderLeft" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{background-color:var(--ec-background-color);position:sticky!important;z-index:calc(var(--ec-z-index-sticky-header) + 1)!important}:host(th){z-index:calc(var(--ec-z-index-sticky-header) + 2)!important}\n"] }); }
6826
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableLockedColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
6827
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TableLockedColumnComponent, isStandalone: false, selector: "[ecTableLockedColumn]", inputs: { options: ["ecTableLockedColumn", "options"] }, host: { properties: { "style.left.px": "this.left", "style.right.px": "this.right", "class.border-right": "this.borderRight", "class.border-left": "this.borderLeft" } }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{background-color:var(--ec-background-color);position:sticky!important;z-index:calc(var(--ec-z-index-sticky-header) + 1)!important}:host(th){z-index:calc(var(--ec-z-index-sticky-header) + 2)!important}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
6828
6828
  }
6829
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableLockedColumnComponent, decorators: [{
6829
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableLockedColumnComponent, decorators: [{
6830
6830
  type: Component,
6831
- args: [{ selector: '[ecTableLockedColumn]', template: `<ng-content></ng-content>`, standalone: false, styles: [":host{background-color:var(--ec-background-color);position:sticky!important;z-index:calc(var(--ec-z-index-sticky-header) + 1)!important}:host(th){z-index:calc(var(--ec-z-index-sticky-header) + 2)!important}\n"] }]
6831
+ args: [{ selector: '[ecTableLockedColumn]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{background-color:var(--ec-background-color);position:sticky!important;z-index:calc(var(--ec-z-index-sticky-header) + 1)!important}:host(th){z-index:calc(var(--ec-z-index-sticky-header) + 2)!important}\n"] }]
6832
6832
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
6833
6833
  type: Input,
6834
6834
  args: ['ecTableLockedColumn']
@@ -7034,12 +7034,12 @@ class TableSelectableRowComponent {
7034
7034
  clearAllRows() {
7035
7035
  this.context.rowCheckboxes.controls.forEach(control => control.setValue(false));
7036
7036
  }
7037
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableSelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7038
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n @if (isHeader) {\n <th\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n @if (context?.selectAllCheckbox) {\n <ec-checkbox id=\"{{id}}_selectAll\"\n class=\"m-0\"\n [formModel]=\"context?.selectAllCheckbox\"\n [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n [ignoreDisabledDependents]=\"false\">\n </ec-checkbox>\n }\n </th>\n }\n @if (!isHeader && formControl) {\n <td\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n and allow the value to be visible to other components (for example, when they subscribe\n to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n [readonly]=\"isCheckboxDisabled\"\n [attr.id]=\"checkboxAttributeID\"\n class=\"m-0 row-checkbox\"\n [formModel]=\"formControl\">\n </ec-checkbox>\n </td>\n }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }] }); }
7037
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableSelectableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7038
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableSelectableRowComponent, isStandalone: false, selector: "[ecTableSelectableRow]", inputs: { id: "id", isSelectionEnabled: ["ecTableSelectableRow", "isSelectionEnabled"], context: ["selectionContext", "context"], rowIndex: "rowIndex", lockedColOptions: "lockedColOptions", isSelected: "isSelected", isCheckboxDisabled: "isCheckboxDisabled" }, host: { listeners: { "click": "rowClicked($event)" }, properties: { "attr.id": "this.id", "class.is-enabled": "this.isSelectionEnabled", "class.is-selected": "this.isSelected", "class.is-header": "this.isHeader" } }, usesOnChanges: true, ngImport: i0, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n @if (isHeader) {\n <th\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n @if (context?.selectAllCheckbox) {\n <ec-checkbox id=\"{{id}}_selectAll\"\n class=\"m-0\"\n [formModel]=\"$safeNavigationMigration(context?.selectAllCheckbox)\"\n [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n [ignoreDisabledDependents]=\"false\">\n </ec-checkbox>\n }\n </th>\n }\n @if (!isHeader && formControl) {\n <td\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n and allow the value to be visible to other components (for example, when they subscribe\n to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n [readonly]=\"isCheckboxDisabled\"\n [attr.id]=\"checkboxAttributeID\"\n class=\"m-0 row-checkbox\"\n [formModel]=\"formControl\">\n </ec-checkbox>\n </td>\n }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TableLockedColumnComponent, selector: "[ecTableLockedColumn]", inputs: ["ecTableLockedColumn"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7039
7039
  }
7040
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableSelectableRowComponent, decorators: [{
7040
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableSelectableRowComponent, decorators: [{
7041
7041
  type: Component,
7042
- args: [{ selector: '[ecTableSelectableRow]', standalone: false, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n @if (isHeader) {\n <th\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n @if (context?.selectAllCheckbox) {\n <ec-checkbox id=\"{{id}}_selectAll\"\n class=\"m-0\"\n [formModel]=\"context?.selectAllCheckbox\"\n [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n [ignoreDisabledDependents]=\"false\">\n </ec-checkbox>\n }\n </th>\n }\n @if (!isHeader && formControl) {\n <td\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n and allow the value to be visible to other components (for example, when they subscribe\n to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n [readonly]=\"isCheckboxDisabled\"\n [attr.id]=\"checkboxAttributeID\"\n class=\"m-0 row-checkbox\"\n [formModel]=\"formControl\">\n </ec-checkbox>\n </td>\n }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"] }]
7042
+ args: [{ selector: '[ecTableSelectableRow]', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!-- any elements of the existing table row that must go before the row selection checkbox can be marked with a class of before-checkbox -->\n<ng-content select=\".before-checkbox\"></ng-content>\n@if (isSelectionEnabled) {\n @if (isHeader) {\n <th\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n @if (context?.selectAllCheckbox) {\n <ec-checkbox id=\"{{id}}_selectAll\"\n class=\"m-0\"\n [formModel]=\"$safeNavigationMigration(context?.selectAllCheckbox)\"\n [dependentCheckboxesGroup]=\"dependentCheckboxesReference\"\n [ignoreDisabledDependents]=\"false\">\n </ec-checkbox>\n }\n </th>\n }\n @if (!isHeader && formControl) {\n <td\n class=\"checkbox\"\n [ecTableLockedColumn]=\"lockedColOptions\">\n <!-- Use [readonly] and not [disabled] for isCheckboxDisabled to prevent user interaction\n and allow the value to be visible to other components (for example, when they subscribe\n to valueChanges on the FormArray that contains all the checkbox FormControls). -->\n <ec-checkbox id=\"{{id}}_row{{rowIndex}}_checkbox\"\n [readonly]=\"isCheckboxDisabled\"\n [attr.id]=\"checkboxAttributeID\"\n class=\"m-0 row-checkbox\"\n [formModel]=\"formControl\">\n </ec-checkbox>\n </td>\n }\n}\n<!-- The rest of the table row -->\n<ng-content></ng-content>", styles: [":host.is-enabled:not(.is-header){cursor:pointer}:host .checkbox{padding-left:2px;padding-right:2px;width:1.25rem}:host .checkbox:first-child{padding-left:.5rem;width:1.625rem}:host.border-bottom-0 .checkbox{border-bottom:0}td.checkbox ec-checkbox ::ng-deep *{pointer-events:none}th.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-th, middle)}td.checkbox{vertical-align:var(--ec-table-selectable-row-vertical-align-checkbox-td, top)}\n"] }]
7043
7043
  }], propDecorators: { id: [{
7044
7044
  type: HostBinding,
7045
7045
  args: ['attr.id']
@@ -7081,33 +7081,33 @@ class ResizableColumnComponent {
7081
7081
  emitWidth(width) {
7082
7082
  this.onResize.emit(width);
7083
7083
  }
7084
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7085
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ResizableColumnComponent, isStandalone: false, selector: "th.is-resizable", outputs: { onResize: "onResize" }, ngImport: i0, template: "<div class=\"content-wrapper\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"handle\"></div>\n" }); }
7084
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7085
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ResizableColumnComponent, isStandalone: false, selector: "th.is-resizable", outputs: { onResize: "onResize" }, ngImport: i0, template: "<div class=\"content-wrapper\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"handle\"></div>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7086
7086
  }
7087
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableColumnComponent, decorators: [{
7087
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableColumnComponent, decorators: [{
7088
7088
  type: Component,
7089
- args: [{ selector: 'th.is-resizable', standalone: false, template: "<div class=\"content-wrapper\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"handle\"></div>\n" }]
7089
+ args: [{ selector: 'th.is-resizable', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"content-wrapper\">\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</div>\n<div class=\"handle\"></div>\n" }]
7090
7090
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onResize: [{
7091
7091
  type: Output
7092
7092
  }] } });
7093
7093
 
7094
7094
  class TableDetailRowComponent {
7095
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableDetailRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7096
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: TableDetailRowComponent, isStandalone: false, selector: "[ecTableDetailRow]", inputs: { contentClass: "contentClass", contentColSpan: "contentColSpan", maxHeight: "maxHeight" }, ngImport: i0, template: `
7095
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDetailRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7096
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TableDetailRowComponent, isStandalone: false, selector: "[ecTableDetailRow]", inputs: { contentClass: "contentClass", contentColSpan: "contentColSpan", maxHeight: "maxHeight" }, ngImport: i0, template: `
7097
7097
  <td></td>
7098
7098
  <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
7099
7099
  <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
7100
7100
  </td>
7101
- `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
7101
+ `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"], dependencies: [{ kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7102
7102
  }
7103
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableDetailRowComponent, decorators: [{
7103
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDetailRowComponent, decorators: [{
7104
7104
  type: Component,
7105
7105
  args: [{ selector: '[ecTableDetailRow]', template: `
7106
7106
  <td></td>
7107
7107
  <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
7108
7108
  <div [style.max-height]="maxHeight" cdkScrollable><ng-content></ng-content></div>
7109
7109
  </td>
7110
- `, standalone: false, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] }]
7110
+ `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] }]
7111
7111
  }], propDecorators: { contentClass: [{
7112
7112
  type: Input
7113
7113
  }], contentColSpan: [{
@@ -7239,12 +7239,12 @@ class TableMasterRowComponent {
7239
7239
  });
7240
7240
  }
7241
7241
  }
7242
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableMasterRowComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
7243
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TableMasterRowComponent, isStandalone: false, selector: "[ecTableMasterRow]", inputs: { id: "id", hasDetails: "hasDetails", showDetails: "showDetails", detailTemplate: "detailTemplate", detailContext: "detailContext", detailRowColSpan: "detailRowColSpan", detailRowClass: "detailRowClass", detailRowContentClass: "detailRowContentClass", detailRowMaxHeight: "detailRowMaxHeight", collapsibleToggleCellClass: "collapsibleToggleCellClass", hideTableMaster: "hideTableMaster" }, outputs: { showDetailsChanged: "showDetailsChanged" }, viewQueries: [{ propertyName: "detailRowTemplate", first: true, predicate: ["detailRow"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideTableMaster) {\n <td class=\"{{collapsibleToggleCellClass}}\">\n @if (hasDetails) {\n <ec-collapsible-toggle\n id=\"{{id}}_toggle\"\n [expanded]=\"showDetails\"\n (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n }\n </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }, { kind: "component", type: TableDetailRowComponent, selector: "[ecTableDetailRow]", inputs: ["contentClass", "contentColSpan", "maxHeight"] }] }); }
7242
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableMasterRowComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Component }); }
7243
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableMasterRowComponent, isStandalone: false, selector: "[ecTableMasterRow]", inputs: { id: "id", hasDetails: "hasDetails", showDetails: "showDetails", detailTemplate: "detailTemplate", detailContext: "detailContext", detailRowColSpan: "detailRowColSpan", detailRowClass: "detailRowClass", detailRowContentClass: "detailRowContentClass", detailRowMaxHeight: "detailRowMaxHeight", collapsibleToggleCellClass: "collapsibleToggleCellClass", hideTableMaster: "hideTableMaster" }, outputs: { showDetailsChanged: "showDetailsChanged" }, viewQueries: [{ propertyName: "detailRowTemplate", first: true, predicate: ["detailRow"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (!hideTableMaster) {\n <td class=\"{{collapsibleToggleCellClass}}\">\n @if (hasDetails) {\n <ec-collapsible-toggle\n id=\"{{id}}_toggle\"\n [expanded]=\"showDetails\"\n (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n }\n </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }, { kind: "component", type: TableDetailRowComponent, selector: "[ecTableDetailRow]", inputs: ["contentClass", "contentColSpan", "maxHeight"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7244
7244
  }
7245
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableMasterRowComponent, decorators: [{
7245
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableMasterRowComponent, decorators: [{
7246
7246
  type: Component,
7247
- args: [{ selector: '[ecTableMasterRow]', standalone: false, template: "@if (!hideTableMaster) {\n <td class=\"{{collapsibleToggleCellClass}}\">\n @if (hasDetails) {\n <ec-collapsible-toggle\n id=\"{{id}}_toggle\"\n [expanded]=\"showDetails\"\n (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n }\n </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"] }]
7247
+ args: [{ selector: '[ecTableMasterRow]', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (!hideTableMaster) {\n <td class=\"{{collapsibleToggleCellClass}}\">\n @if (hasDetails) {\n <ec-collapsible-toggle\n id=\"{{id}}_toggle\"\n [expanded]=\"showDetails\"\n (expandedChange)=\"toggleDetails($event)\"></ec-collapsible-toggle>\n }\n </td>\n}\n<ng-content></ng-content>\n\n<ng-template #detailRow>\n <tr ecTableDetailRow class=\"{{detailRowClass}}\" [contentClass]=\"detailRowContentClass\" [contentColSpan]=\"detailRowColSpan\" [maxHeight]=\"detailRowMaxHeight\">\n <ng-container *ngTemplateOutlet=\"detailTemplate; context: {$implicit: detailContext}\"></ng-container>\n </tr>\n</ng-template>", styles: ["td{width:1.5rem;padding:.25rem 0!important;vertical-align:top}td ::ng-deep+td{padding-left:0}\n"] }]
7248
7248
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ApplicationRef }], propDecorators: { id: [{
7249
7249
  type: Input
7250
7250
  }], hasDetails: [{
@@ -7376,10 +7376,10 @@ class ResizableBase {
7376
7376
  console.error('rememberWidth is set but will not take effect unless ID is also set');
7377
7377
  }
7378
7378
  }
7379
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableBase, deps: [{ token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
7380
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ResizableBase, isStandalone: true, inputs: { rememberWidth: "rememberWidth", id: "id" }, ngImport: i0 }); }
7379
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableBase, deps: [{ token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
7380
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ResizableBase, isStandalone: true, inputs: { rememberWidth: "rememberWidth", id: "id" }, ngImport: i0 }); }
7381
7381
  }
7382
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableBase, decorators: [{
7382
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableBase, decorators: [{
7383
7383
  type: Directive
7384
7384
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: CacheService }, { type: Document, decorators: [{
7385
7385
  type: Inject,
@@ -7588,10 +7588,10 @@ class ResizableTableDirective extends ResizableBase {
7588
7588
  this.renderer.setStyle(this.tableEl, 'width', Math.max(this.currentTableWidth, totalColWidths) + 'px');
7589
7589
  this.renderer.setStyle(this.tableEl, 'minWidth', '100%');
7590
7590
  }
7591
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
7592
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ResizableTableDirective, isStandalone: false, selector: "[ecResizableTable]", inputs: { isResizable: ["ecResizableTable", "isResizable"], containerEl: "containerEl", sortableTable: "sortableTable", resizableColumns: "resizableColumns" }, usesInheritance: true, ngImport: i0 }); }
7591
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
7592
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ResizableTableDirective, isStandalone: false, selector: "[ecResizableTable]", inputs: { isResizable: ["ecResizableTable", "isResizable"], containerEl: "containerEl", sortableTable: "sortableTable", resizableColumns: "resizableColumns" }, usesInheritance: true, ngImport: i0 }); }
7593
7593
  }
7594
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableTableDirective, decorators: [{
7594
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableTableDirective, decorators: [{
7595
7595
  type: Directive,
7596
7596
  args: [{
7597
7597
  selector: '[ecResizableTable]',
@@ -7790,12 +7790,12 @@ class TableComponent {
7790
7790
  this.hasSelection = value.some(v => v);
7791
7791
  });
7792
7792
  }
7793
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7794
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TableComponent, isStandalone: false, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.has-title": "this.hasHeaderTitleTemplate", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (headerTitleTemplate) {\n <header class=\"table-title\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n <div class=\"selectable-table-toolbar\"\n >\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n class=\"table-scroll-container\"\n cdkScrollable>\n <table class=\"main-table\"\n id=\"{{id}}\"\n [ecResizableTable]=\"resizable\"\n [containerEl]=\"el\"\n [sortableTable]=\"sortable\"\n [resizableColumns]=\"resizableColumns\">\n <ng-content></ng-content>\n </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None }); }
7793
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
7794
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: false, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", headerTitleTemplate: "headerTitleTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.has-title": "this.hasHeaderTitleTemplate", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (headerTitleTemplate) {\n <header class=\"table-title\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n <div class=\"selectable-table-toolbar\"\n >\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n class=\"table-scroll-container\"\n cdkScrollable>\n <table class=\"main-table\"\n id=\"{{id}}\"\n [ecResizableTable]=\"resizable\"\n [containerEl]=\"el\"\n [sortableTable]=\"sortable\"\n [resizableColumns]=\"resizableColumns\">\n <ng-content></ng-content>\n </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
7795
7795
  }
7796
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableComponent, decorators: [{
7796
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
7797
7797
  type: Component,
7798
- args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, standalone: false, template: "@if (headerTitleTemplate) {\n <header class=\"table-title\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n <div class=\"selectable-table-toolbar\"\n >\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n class=\"table-scroll-container\"\n cdkScrollable>\n <table class=\"main-table\"\n id=\"{{id}}\"\n [ecResizableTable]=\"resizable\"\n [containerEl]=\"el\"\n [sortableTable]=\"sortable\"\n [resizableColumns]=\"resizableColumns\">\n <ng-content></ng-content>\n </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
7798
+ args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (headerTitleTemplate) {\n <header class=\"table-title\">\n <ng-container *ngTemplateOutlet=\"headerTitleTemplate\"></ng-container>\n </header>\n}\n\n@if (hasSelection && selectionToolbarTemplate) {\n <div class=\"selectable-table-toolbar\"\n >\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\n </div>\n}\n\n<div id=\"{{id}}-scroll-container\"\n class=\"table-scroll-container\"\n cdkScrollable>\n <table class=\"main-table\"\n id=\"{{id}}\"\n [ecResizableTable]=\"resizable\"\n [containerEl]=\"el\"\n [sortableTable]=\"sortable\"\n [resizableColumns]=\"resizableColumns\">\n <ng-content></ng-content>\n </table>\n</div>\n", styles: ["ec-table{display:flex;flex-direction:column;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .table-title{height:2.5rem;display:flex;align-items:center;padding:0 .5rem}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.625rem);top:0;height:2.5rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.has-title .selectable-table-toolbar{left:0}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{font:var(--fa-font-solid);content:\"\\f062\";display:inline-flex}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{width:.875rem;height:.875rem;margin:0 .25rem;font-size:.75rem;display:none;align-items:center;justify-content:center}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{font:var(--fa-font-solid);content:\"\\f062\";display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable{overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:2.5rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:.75rem;padding-bottom:.75rem}ec-table.is-selectable th.is-resizable .handle:before{top:.75rem;bottom:.75rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
7799
7799
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { id: [{
7800
7800
  type: HostBinding,
7801
7801
  args: ['attr.id']
@@ -7920,12 +7920,12 @@ class TabsComponent {
7920
7920
  this.tabs.selected = tab;
7921
7921
  }
7922
7922
  }
7923
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7924
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n </li>\n }\n </ul>\n}", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
7923
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7924
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TabsComponent, isStandalone: false, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n </li>\n }\n </ul>\n}", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7925
7925
  }
7926
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TabsComponent, decorators: [{
7926
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TabsComponent, decorators: [{
7927
7927
  type: Component,
7928
- args: [{ selector: 'ec-tabs', standalone: false, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n </li>\n }\n </ul>\n}", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
7928
+ args: [{ selector: 'ec-tabs', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n </li>\n }\n </ul>\n}", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
7929
7929
  }], ctorParameters: () => [], propDecorators: { id: [{
7930
7930
  type: Input
7931
7931
  }], tabindex: [{
@@ -8062,14 +8062,14 @@ class TablePaginationComponent {
8062
8062
  value: { firstPage: start, lastPage: lastPage }
8063
8063
  });
8064
8064
  }
8065
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8066
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TablePaginationComponent, isStandalone: false, 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\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}", dependencies: [{ 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", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] }); }
8065
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8066
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TablePaginationComponent, isStandalone: false, 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\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}", dependencies: [{ 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", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
8067
8067
  }
8068
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TablePaginationComponent, decorators: [{
8068
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePaginationComponent, decorators: [{
8069
8069
  type: Component,
8070
8070
  args: [{ selector: 'ec-table-pagination', host: {
8071
8071
  class: 'd-flex px-2 align-items-center'
8072
- }, standalone: false, template: "<ec-tabs id=\"{{id}}_pages\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}" }]
8072
+ }, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ec-tabs id=\"{{id}}_pages\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}" }]
8073
8073
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
8074
8074
  type: Input
8075
8075
  }], totalItems: [{
@@ -8135,10 +8135,10 @@ class ErrorService {
8135
8135
  console.error('unknown error:', error);
8136
8136
  }
8137
8137
  }
8138
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8139
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ErrorService, providedIn: 'root' }); }
8138
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8139
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorService, providedIn: 'root' }); }
8140
8140
  }
8141
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ErrorService, decorators: [{
8141
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorService, decorators: [{
8142
8142
  type: Injectable,
8143
8143
  args: [{
8144
8144
  providedIn: 'root'
@@ -8180,10 +8180,10 @@ class RowCountPipe {
8180
8180
  let prefix = `${pagingInfo.skip + 1}` + (results.totalItems > 1 ? `-${pagingInfo.skip + results.totalItems} ` : ' ');
8181
8181
  return prefix + `${this.translateService.instant('of')} ${results.totalItemsBeforePaging} ${objectType}`;
8182
8182
  }
8183
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowCountPipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
8184
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: RowCountPipe, isStandalone: false, name: "rowCount" }); }
8183
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RowCountPipe, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
8184
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: RowCountPipe, isStandalone: false, name: "rowCount" }); }
8185
8185
  }
8186
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RowCountPipe, decorators: [{
8186
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RowCountPipe, decorators: [{
8187
8187
  type: Pipe,
8188
8188
  args: [{
8189
8189
  name: 'rowCount',
@@ -8435,12 +8435,12 @@ class SearchableTableComponent {
8435
8435
  }
8436
8436
  return this.translateService.instant(this.noDataMessage || 'SearchableTable_Default_NoData_SC');
8437
8437
  }
8438
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SearchableTableComponent, deps: [{ token: ErrorService }, { token: i3.TranslateService }, { token: RowCountPipe }], target: i0.ɵɵFactoryTarget.Component }); }
8439
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SearchableTableComponent, isStandalone: false, 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", headerTitleTemplate: "headerTitleTemplate", 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: "@if (!hideHeader) {\n <header\n class=\"d-flex flex-shrink align-items-center mb-3\">\n @if (!hideSearchControl) {\n <ec-textbox id=\"{{id}}_searchbox\"\n class=\"mb-0 flex-grow mr-2\"\n [autofocus]=\"autofocus\"\n [formModel]=\"searchModel\"\n [tabindex]=\"searchboxTabIndex\"\n [placeholder]=\"searchboxPlaceholder\"\n [readonly]=\"searchboxReadonly\"></ec-textbox>\n }\n <div class=\"flex-grow\">\n <ng-content select=\".searchable-table-controls\"></ng-content>\n </div>\n </header>\n}\n<section id=\"{{id}}_card\"\n class=\"d-flex flex-column {{overlayClasses}}\"\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n ecOverlay\n [status]=\"status.status\"\n [message]=\"status.message\"\n [displayAsMask]=\"true\">\n\n @if(!headerTitleTemplate) {\n <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n <ng-content select=\".card-header\"></ng-content>\n }\n\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n </ng-container>\n\n <!-- the default template is an ec-table with proxied-over searchable table inputs.\n If that doesn't work for you then you can specify a customContentTemplate to use instead\n and still retain all the event handling, header, footer pagination, etc support -->\n <ng-template #defaultContentTemplate>\n <ec-table id=\"{{id}}_table\"\n class=\"{{tableClasses}}\"\n [class.is-fixed]=\"tableLayoutFixed\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n (sortChange)=\"onSortChange($event)\"\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [selectable]=\"selectable\"\n [selectionContext]=\"selectionContext\"\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n [resizableColumns]=\"resizableColumns\"\n [headerTitleTemplate]=\"headerTitleTemplate\">\n <ng-content></ng-content>\n </ec-table>\n </ng-template>\n\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n <footer\n class=\"pagination-footer\"\n [class.border-top]=\"!customContentTemplate\">\n <ec-table-pagination id=\"{{id}}_pager\"\n class=\"font-color-primary\"\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\n [pageSize]=\"pageSize\"\n [maxTabs]=\"maxTabs\"\n [pageNumber]=\"pageInfo?.pageNumber\"\n [disablePaginationControls]=\"disablePaginationControls\"\n (pageChanged)=\"onPageChange($event)\">\n </ec-table-pagination>\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto font-color-hint text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\n\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) -->\n @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n <footer\n class=\"caption-footer\"\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n @if (!tableCaption) {\n <ng-content\n select=\".searchable-table-footer\"></ng-content>\n }\n @if (tableCaption) {\n <div id=\"tableCaption\"\n [innerHTML]=\"tableCaption\"></div>\n }\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\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.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", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }] }); }
8438
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SearchableTableComponent, deps: [{ token: ErrorService }, { token: i3.TranslateService }, { token: RowCountPipe }], target: i0.ɵɵFactoryTarget.Component }); }
8439
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SearchableTableComponent, isStandalone: false, 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", headerTitleTemplate: "headerTitleTemplate", 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: "@if (!hideHeader) {\n <header\n class=\"d-flex flex-shrink align-items-center mb-3\">\n @if (!hideSearchControl) {\n <ec-textbox id=\"{{id}}_searchbox\"\n class=\"mb-0 flex-grow mr-2\"\n [autofocus]=\"autofocus\"\n [formModel]=\"searchModel\"\n [tabindex]=\"searchboxTabIndex\"\n [placeholder]=\"searchboxPlaceholder\"\n [readonly]=\"searchboxReadonly\"></ec-textbox>\n }\n <div class=\"flex-grow\">\n <ng-content select=\".searchable-table-controls\"></ng-content>\n </div>\n </header>\n}\n<section id=\"{{id}}_card\"\n class=\"d-flex flex-column {{overlayClasses}}\"\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n ecOverlay\n [status]=\"status.status\"\n [message]=\"status.message\"\n [displayAsMask]=\"true\">\n\n @if(!headerTitleTemplate) {\n <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n <ng-content select=\".card-header\"></ng-content>\n }\n\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n </ng-container>\n\n <!-- the default template is an ec-table with proxied-over searchable table inputs.\n If that doesn't work for you then you can specify a customContentTemplate to use instead\n and still retain all the event handling, header, footer pagination, etc support -->\n <ng-template #defaultContentTemplate>\n <ec-table id=\"{{id}}_table\"\n class=\"{{tableClasses}}\"\n [class.is-fixed]=\"tableLayoutFixed\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n (sortChange)=\"onSortChange($event)\"\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [selectable]=\"selectable\"\n [selectionContext]=\"selectionContext\"\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n [resizableColumns]=\"resizableColumns\"\n [headerTitleTemplate]=\"headerTitleTemplate\">\n <ng-content></ng-content>\n </ec-table>\n </ng-template>\n\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n <footer\n class=\"pagination-footer\"\n [class.border-top]=\"!customContentTemplate\">\n <ec-table-pagination id=\"{{id}}_pager\"\n class=\"font-color-primary\"\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\n [pageSize]=\"pageSize\"\n [maxTabs]=\"maxTabs\"\n [pageNumber]=\"$safeNavigationMigration(pageInfo?.pageNumber)\"\n [disablePaginationControls]=\"disablePaginationControls\"\n (pageChanged)=\"onPageChange($event)\">\n </ec-table-pagination>\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto font-color-hint text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\n\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) -->\n @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n <footer\n class=\"caption-footer\"\n [ngClass]=\"{'has-results': $safeNavigationMigration(searchResults?.items?.length), 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n @if (!tableCaption) {\n <ng-content\n select=\".searchable-table-footer\"></ng-content>\n }\n @if (tableCaption) {\n <div id=\"tableCaption\"\n [innerHTML]=\"tableCaption\"></div>\n }\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\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.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", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
8440
8440
  }
8441
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SearchableTableComponent, decorators: [{
8441
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SearchableTableComponent, decorators: [{
8442
8442
  type: Component,
8443
- args: [{ selector: 'ec-searchable-table', standalone: false, template: "@if (!hideHeader) {\n <header\n class=\"d-flex flex-shrink align-items-center mb-3\">\n @if (!hideSearchControl) {\n <ec-textbox id=\"{{id}}_searchbox\"\n class=\"mb-0 flex-grow mr-2\"\n [autofocus]=\"autofocus\"\n [formModel]=\"searchModel\"\n [tabindex]=\"searchboxTabIndex\"\n [placeholder]=\"searchboxPlaceholder\"\n [readonly]=\"searchboxReadonly\"></ec-textbox>\n }\n <div class=\"flex-grow\">\n <ng-content select=\".searchable-table-controls\"></ng-content>\n </div>\n </header>\n}\n<section id=\"{{id}}_card\"\n class=\"d-flex flex-column {{overlayClasses}}\"\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n ecOverlay\n [status]=\"status.status\"\n [message]=\"status.message\"\n [displayAsMask]=\"true\">\n\n @if(!headerTitleTemplate) {\n <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n <ng-content select=\".card-header\"></ng-content>\n }\n\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n </ng-container>\n\n <!-- the default template is an ec-table with proxied-over searchable table inputs.\n If that doesn't work for you then you can specify a customContentTemplate to use instead\n and still retain all the event handling, header, footer pagination, etc support -->\n <ng-template #defaultContentTemplate>\n <ec-table id=\"{{id}}_table\"\n class=\"{{tableClasses}}\"\n [class.is-fixed]=\"tableLayoutFixed\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n (sortChange)=\"onSortChange($event)\"\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [selectable]=\"selectable\"\n [selectionContext]=\"selectionContext\"\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n [resizableColumns]=\"resizableColumns\"\n [headerTitleTemplate]=\"headerTitleTemplate\">\n <ng-content></ng-content>\n </ec-table>\n </ng-template>\n\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n <footer\n class=\"pagination-footer\"\n [class.border-top]=\"!customContentTemplate\">\n <ec-table-pagination id=\"{{id}}_pager\"\n class=\"font-color-primary\"\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\n [pageSize]=\"pageSize\"\n [maxTabs]=\"maxTabs\"\n [pageNumber]=\"pageInfo?.pageNumber\"\n [disablePaginationControls]=\"disablePaginationControls\"\n (pageChanged)=\"onPageChange($event)\">\n </ec-table-pagination>\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto font-color-hint text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\n\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) -->\n @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n <footer\n class=\"caption-footer\"\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n @if (!tableCaption) {\n <ng-content\n select=\".searchable-table-footer\"></ng-content>\n }\n @if (tableCaption) {\n <div id=\"tableCaption\"\n [innerHTML]=\"tableCaption\"></div>\n }\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\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"] }]
8443
+ args: [{ selector: 'ec-searchable-table', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (!hideHeader) {\n <header\n class=\"d-flex flex-shrink align-items-center mb-3\">\n @if (!hideSearchControl) {\n <ec-textbox id=\"{{id}}_searchbox\"\n class=\"mb-0 flex-grow mr-2\"\n [autofocus]=\"autofocus\"\n [formModel]=\"searchModel\"\n [tabindex]=\"searchboxTabIndex\"\n [placeholder]=\"searchboxPlaceholder\"\n [readonly]=\"searchboxReadonly\"></ec-textbox>\n }\n <div class=\"flex-grow\">\n <ng-content select=\".searchable-table-controls\"></ng-content>\n </div>\n </header>\n}\n<section id=\"{{id}}_card\"\n class=\"d-flex flex-column {{overlayClasses}}\"\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\n ecOverlay\n [status]=\"status.status\"\n [message]=\"status.message\"\n [displayAsMask]=\"true\">\n\n @if(!headerTitleTemplate) {\n <!-- Fallback to the projected content if a headerTitleTemplate is not found. This keeps us backwards compatible -->\n <ng-content select=\".card-header\"></ng-content>\n }\n\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\n </ng-container>\n\n <!-- the default template is an ec-table with proxied-over searchable table inputs.\n If that doesn't work for you then you can specify a customContentTemplate to use instead\n and still retain all the event handling, header, footer pagination, etc support -->\n <ng-template #defaultContentTemplate>\n <ec-table id=\"{{id}}_table\"\n class=\"{{tableClasses}}\"\n [class.is-fixed]=\"tableLayoutFixed\"\n [sortable]=\"sortable\"\n [sort]=\"sort\"\n (sortChange)=\"onSortChange($event)\"\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [selectable]=\"selectable\"\n [selectionContext]=\"selectionContext\"\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\n [resizableColumns]=\"resizableColumns\"\n [headerTitleTemplate]=\"headerTitleTemplate\">\n <ng-content></ng-content>\n </ec-table>\n </ng-template>\n\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\n @if (!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!) {\n <footer\n class=\"pagination-footer\"\n [class.border-top]=\"!customContentTemplate\">\n <ec-table-pagination id=\"{{id}}_pager\"\n class=\"font-color-primary\"\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\n [pageSize]=\"pageSize\"\n [maxTabs]=\"maxTabs\"\n [pageNumber]=\"$safeNavigationMigration(pageInfo?.pageNumber)\"\n [disablePaginationControls]=\"disablePaginationControls\"\n (pageChanged)=\"onPageChange($event)\">\n </ec-table-pagination>\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto font-color-hint text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\n\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) -->\n @if ((!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption) {\n <footer\n class=\"caption-footer\"\n [ngClass]=\"{'has-results': $safeNavigationMigration(searchResults?.items?.length), 'border-top': searchResults?.items?.length && !customContentTemplate}\">\n @if (!tableCaption) {\n <ng-content\n select=\".searchable-table-footer\"></ng-content>\n }\n @if (tableCaption) {\n <div id=\"tableCaption\"\n [innerHTML]=\"tableCaption\"></div>\n }\n @if (searchResults?.items?.length) {\n <div id=\"resultsCount\"\n class=\"ml-auto text-truncate\"\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\n }\n </footer>\n }\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"] }]
8444
8444
  }], ctorParameters: () => [{ type: ErrorService }, { type: i3.TranslateService }, { type: RowCountPipe }], propDecorators: { id: [{
8445
8445
  type: Input
8446
8446
  }], resizable: [{
@@ -8524,12 +8524,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
8524
8524
  }] } });
8525
8525
 
8526
8526
  class LinkButtonComponent {
8527
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8528
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: LinkButtonComponent, isStandalone: false, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }); }
8527
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8528
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: LinkButtonComponent, isStandalone: false, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
8529
8529
  }
8530
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinkButtonComponent, decorators: [{
8530
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LinkButtonComponent, decorators: [{
8531
8531
  type: Component,
8532
- args: [{ selector: 'button[ecLinkButton]', template: `<ng-content></ng-content>`, standalone: false, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }]
8532
+ args: [{ selector: 'button[ecLinkButton]', template: `<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }]
8533
8533
  }] });
8534
8534
 
8535
8535
  ;
@@ -8797,12 +8797,12 @@ class ItemPickerComponent {
8797
8797
  this.internalizedSelectedItemTemplate = this.defaultSelectedItemTemplate;
8798
8798
  }
8799
8799
  }
8800
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
8801
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ItemPickerComponent, isStandalone: false, 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\n class=\"d-flex flex-grow card\"\n [status]=\"tableStatus?.status\"\n [message]=\"tableStatus?.message\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\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.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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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", "headerTitleTemplate", "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", "headerTitleTemplate", "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" }] }); }
8800
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
8801
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ItemPickerComponent, isStandalone: false, 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\n class=\"d-flex flex-grow card\"\n [status]=\"$safeNavigationMigration(tableStatus?.status)\"\n [message]=\"$safeNavigationMigration(tableStatus?.message)\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\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.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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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", "headerTitleTemplate", "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", "headerTitleTemplate", "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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
8802
8802
  }
8803
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemPickerComponent, decorators: [{
8803
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ItemPickerComponent, decorators: [{
8804
8804
  type: Component,
8805
- args: [{ selector: 'ec-item-picker', standalone: false, template: "<div ecOverlay\n class=\"d-flex flex-grow card\"\n [status]=\"tableStatus?.status\"\n [message]=\"tableStatus?.message\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\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"] }]
8805
+ args: [{ selector: 'ec-item-picker', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div ecOverlay\n class=\"d-flex flex-grow card\"\n [status]=\"$safeNavigationMigration(tableStatus?.status)\"\n [message]=\"$safeNavigationMigration(tableStatus?.message)\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\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"] }]
8806
8806
  }], ctorParameters: () => [{ type: i3.TranslateService }], propDecorators: { id: [{
8807
8807
  type: Input
8808
8808
  }], availableTitle: [{
@@ -9628,12 +9628,12 @@ class MultiselectComponent extends FormControlBase {
9628
9628
  }
9629
9629
  });
9630
9630
  }
9631
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
9632
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
9631
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
9632
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9633
9633
  }
9634
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, decorators: [{
9634
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MultiselectComponent, decorators: [{
9635
9635
  type: Component,
9636
- args: [{ selector: 'ec-multiselect', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
9636
+ args: [{ selector: 'ec-multiselect', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
9637
9637
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }, { type: ScrollService }], propDecorators: { onResize: [{
9638
9638
  type: HostListener,
9639
9639
  args: ['window:resize']
@@ -10030,12 +10030,12 @@ class NumericboxComponent extends FormControlBase {
10030
10030
  this.renderer.setProperty(unitsEl, 'innerHTML', text);
10031
10031
  return unitsEl;
10032
10032
  }
10033
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NumericboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
10034
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: NumericboxComponent, isStandalone: false, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n as we would push them past the limit -->\n <ec-textbox [id]=\"id\"\n #textbox\n class=\"control-input mb-0\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n [tooltip]=\"tooltip\"\n (focusout)=\"onFocusOut()\">\n </ec-textbox>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
10033
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumericboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
10034
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NumericboxComponent, isStandalone: false, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n as we would push them past the limit -->\n <ec-textbox [id]=\"id\"\n #textbox\n class=\"control-input mb-0\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n [tooltip]=\"tooltip\"\n (focusout)=\"onFocusOut()\">\n </ec-textbox>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10035
10035
  }
10036
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NumericboxComponent, decorators: [{
10036
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumericboxComponent, decorators: [{
10037
10037
  type: Component,
10038
- args: [{ selector: 'ec-numericbox', standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n as we would push them past the limit -->\n <ec-textbox [id]=\"id\"\n #textbox\n class=\"control-input mb-0\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n [tooltip]=\"tooltip\"\n (focusout)=\"onFocusOut()\">\n </ec-textbox>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"] }]
10038
+ args: [{ selector: 'ec-numericbox', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control control-label-{{labelPosition}}\"\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length && formModel?.touched && formModel?.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\n as we would push them past the limit -->\n <ec-textbox [id]=\"id\"\n #textbox\n class=\"control-input mb-0\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n [tooltip]=\"tooltip\"\n (focusout)=\"onFocusOut()\">\n </ec-textbox>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid:hover:not(:disabled):not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"] }]
10039
10039
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
10040
10040
  type: Input
10041
10041
  }], decimals: [{
@@ -10126,12 +10126,12 @@ class RadioButtonComponent extends FormControlBase {
10126
10126
  console.warn("Radio button components with a type of toggle cannot have more than 5 options");
10127
10127
  }
10128
10128
  }
10129
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
10130
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: RadioButtonComponent, isStandalone: false, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", iconOnly: "iconOnly", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n [ngClass]=\"currentClasses\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-readonly]=\"readonly\">\n\n <!-- RadioButton type=\"toggle\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'toggle') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n [formControl]=\"formModel\"\n type=\"radio\"\n tabindex=\"{{tabindex}}\"\n [value]=\"option.value\"\n #radioInput\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <label [attr.for]=\"inputId + i.toString()\"\n [class.is-selected]=\"formModel.value === option.value\"\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n @if (option.icon) {\n <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n }\n @if (option.label && !iconOnly) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n >{{option.label | translate}}</span>\n }\n @if (option.label && iconOnly) {\n <span class=\"sr-only\">{{option.label | translate}}</span>\n }\n </label>\n }\n <a>\n <div class=\"toggle-handle\"></div>\n </a>\n <div class=\"toggle-focused\"></div>\n }\n\n <!-- RadioButton type=\"radio\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'radio') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <label class='radio-button'\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n class=\"input\"\n [formControl]=\"formModel\"\n type=\"radio\"\n value=\"{{option.value}}\"\n #radioInput\n tabindex=\"{{tabindex}}\"\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <span class=\"indicator\"></span>\n @if (option.label) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n class=\"label\"\n [innerHtml]=\"option.label | translate\"></span>\n }\n </label>\n }\n }\n\n </div>\n\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;gap:.25rem;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle label.is-selected{color:var(--ec-color-interactive)}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
10129
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
10130
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RadioButtonComponent, isStandalone: false, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", iconOnly: "iconOnly", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n [ngClass]=\"currentClasses\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-readonly]=\"readonly\">\n\n <!-- RadioButton type=\"toggle\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'toggle') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n [formControl]=\"formModel\"\n type=\"radio\"\n tabindex=\"{{tabindex}}\"\n [value]=\"option.value\"\n #radioInput\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <label [attr.for]=\"inputId + i.toString()\"\n [class.is-selected]=\"formModel.value === option.value\"\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n @if (option.icon) {\n <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n }\n @if (option.label && !iconOnly) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n >{{option.label | translate}}</span>\n }\n @if (option.label && iconOnly) {\n <span class=\"sr-only\">{{option.label | translate}}</span>\n }\n </label>\n }\n <a>\n <div class=\"toggle-handle\"></div>\n </a>\n <div class=\"toggle-focused\"></div>\n }\n\n <!-- RadioButton type=\"radio\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'radio') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <label class='radio-button'\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n class=\"input\"\n [formControl]=\"formModel\"\n type=\"radio\"\n value=\"{{option.value}}\"\n #radioInput\n tabindex=\"{{tabindex}}\"\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <span class=\"indicator\"></span>\n @if (option.label) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n class=\"label\"\n [innerHtml]=\"option.label | translate\"></span>\n }\n </label>\n }\n }\n\n </div>\n\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;gap:.25rem;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle label.is-selected{color:var(--ec-color-interactive)}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10131
10131
  }
10132
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
10132
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RadioButtonComponent, decorators: [{
10133
10133
  type: Component,
10134
- args: [{ selector: 'ec-radiobutton', standalone: false, template: "<div class=\"control\"\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n [ngClass]=\"currentClasses\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-readonly]=\"readonly\">\n\n <!-- RadioButton type=\"toggle\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'toggle') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n [formControl]=\"formModel\"\n type=\"radio\"\n tabindex=\"{{tabindex}}\"\n [value]=\"option.value\"\n #radioInput\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <label [attr.for]=\"inputId + i.toString()\"\n [class.is-selected]=\"formModel.value === option.value\"\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n @if (option.icon) {\n <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n }\n @if (option.label && !iconOnly) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n >{{option.label | translate}}</span>\n }\n @if (option.label && iconOnly) {\n <span class=\"sr-only\">{{option.label | translate}}</span>\n }\n </label>\n }\n <a>\n <div class=\"toggle-handle\"></div>\n </a>\n <div class=\"toggle-focused\"></div>\n }\n\n <!-- RadioButton type=\"radio\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'radio') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <label class='radio-button'\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n class=\"input\"\n [formControl]=\"formModel\"\n type=\"radio\"\n value=\"{{option.value}}\"\n #radioInput\n tabindex=\"{{tabindex}}\"\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <span class=\"indicator\"></span>\n @if (option.label) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n class=\"label\"\n [innerHtml]=\"option.label | translate\"></span>\n }\n </label>\n }\n }\n\n </div>\n\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;gap:.25rem;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle label.is-selected{color:var(--ec-color-interactive)}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
10134
+ args: [{ selector: 'ec-radiobutton', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control\"\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\n\n @if (label) {\n <label>\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span>&nbsp;{{validationErrors | translate}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\n [ngClass]=\"currentClasses\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-readonly]=\"readonly\">\n\n <!-- RadioButton type=\"toggle\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'toggle') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n [formControl]=\"formModel\"\n type=\"radio\"\n tabindex=\"{{tabindex}}\"\n [value]=\"option.value\"\n #radioInput\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.aria-label]=\"iconOnly ? ((option.label || option.tooltip || option.value) | translate) : null\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <label [attr.for]=\"inputId + i.toString()\"\n [class.is-selected]=\"formModel.value === option.value\"\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n @if (option.icon) {\n <i class=\"ec-icon {{option.icon}}\" aria-hidden=\"true\"></i>\n }\n @if (option.label && !iconOnly) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n >{{option.label | translate}}</span>\n }\n @if (option.label && iconOnly) {\n <span class=\"sr-only\">{{option.label | translate}}</span>\n }\n </label>\n }\n <a>\n <div class=\"toggle-handle\"></div>\n </a>\n <div class=\"toggle-focused\"></div>\n }\n\n <!-- RadioButton type=\"radio\"-->\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\n @if (type === 'radio') {\n @for (option of options; track option; let i = $index; let isFirst = $first) {\n <label class='radio-button'\n title=\"{{ (option.tooltip ?? '') | translate}}\">\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\n the tabbing did not work, and with the other the controls were all linked together. They both need set\n for the best of both worlds -->\n <input [attr.id]=\"inputId + i.toString()\"\n class=\"input\"\n [formControl]=\"formModel\"\n type=\"radio\"\n value=\"{{option.value}}\"\n #radioInput\n tabindex=\"{{tabindex}}\"\n name=\"{{name}}\"\n attr.name=\"{{name}}\"\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\n <span class=\"indicator\"></span>\n @if (option.label) {\n <span id=\"{{inputId}}_label{{i.toString()}}\"\n class=\"label\"\n [innerHtml]=\"option.label | translate\"></span>\n }\n </label>\n }\n }\n\n </div>\n\n </div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:hover:not(:disabled):not(:focus)+.indicator{border-color:var(--ec-border-color-control-hover)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;gap:.25rem;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle label.is-selected{color:var(--ec-color-interactive)}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
10135
10135
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }], propDecorators: { type: [{
10136
10136
  type: Input
10137
10137
  }], options: [{
@@ -10212,12 +10212,12 @@ class SelectComponent extends FormControlBase {
10212
10212
  this.formModel.setValue(this.options[0]?.value, { emitEvent: !firstChange });
10213
10213
  }
10214
10214
  }
10215
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
10216
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label\n for=\"{{id}}_select\">\n <span>{{label | translate}}</span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <select [attr.id]=\"inputId\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.required]=\"required\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (!required) {\n <option\n [ngValue]=\"null\">{{placeholder}}</option>\n }\n @for (option of options; track option) {\n <option\n [ngValue]=\"option.value\">{{option.label}}</option>\n }\n </select>\n <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
10215
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
10216
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectComponent, isStandalone: false, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label\n for=\"{{id}}_select\">\n <span>{{label | translate}}</span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <select [attr.id]=\"inputId\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.required]=\"required\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (!required) {\n <option\n [ngValue]=\"null\">{{placeholder}}</option>\n }\n @for (option of options; track option) {\n <option\n [ngValue]=\"option.value\">{{option.label}}</option>\n }\n </select>\n <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10217
10217
  }
10218
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectComponent, decorators: [{
10218
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, decorators: [{
10219
10219
  type: Component,
10220
- args: [{ selector: 'ec-select', standalone: false, template: "<div class=\"control\"\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label\n for=\"{{id}}_select\">\n <span>{{label | translate}}</span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <select [attr.id]=\"inputId\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.required]=\"required\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (!required) {\n <option\n [ngValue]=\"null\">{{placeholder}}</option>\n }\n @for (option of options; track option) {\n <option\n [ngValue]=\"option.value\">{{option.label}}</option>\n }\n </select>\n <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
10220
+ args: [{ selector: 'ec-select', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"control\"\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label\n for=\"{{id}}_select\">\n <span>{{label | translate}}</span>\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <select [attr.id]=\"inputId\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"formModel\"\n [attr.required]=\"required\"\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (!required) {\n <option\n [ngValue]=\"null\">{{placeholder}}</option>\n }\n @for (option of options; track option) {\n <option\n [ngValue]=\"option.value\">{{option.label}}</option>\n }\n </select>\n <i class=\"ec-icon icon-caret-down\" aria-hidden=\"true\"></i>\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .control{position:relative}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:host select::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host select::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host select:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host select{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host select~.icon-required,:host select~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host select:required.is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host select.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host select.ng-invalid.ng-touched:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.ng-invalid.ng-touched{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1}:host select:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host select:disabled:required+.icon-required,:host select:disabled:required.is-empty+.icon-required{display:none}:host select:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select{padding-right:1.5rem}:host select:focus{position:static}:host .icon-caret-down{position:absolute;right:.5rem;bottom:.5625rem;z-index:1;pointer-events:none}:host select:disabled~.icon-caret-down{opacity:var(--ec-form-control-opacity-disabled)}:host .is-readonly .icon-caret-down{display:none}\n"] }]
10221
10221
  }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }], propDecorators: { placeholder: [{
10222
10222
  type: Input
10223
10223
  }], options: [{
@@ -10278,10 +10278,10 @@ class AvatarService {
10278
10278
  };
10279
10279
  return trimmedUser;
10280
10280
  }
10281
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10282
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarService, providedIn: 'root' }); }
10281
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10282
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AvatarService, providedIn: 'root' }); }
10283
10283
  }
10284
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarService, decorators: [{
10284
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AvatarService, decorators: [{
10285
10285
  type: Injectable,
10286
10286
  args: [{
10287
10287
  providedIn: 'root'
@@ -10342,12 +10342,12 @@ class AvatarComponent {
10342
10342
  this.currentCSSClass = `avatar-${color}`;
10343
10343
  this.renderer.addClass(this.el.nativeElement, this.currentCSSClass);
10344
10344
  }
10345
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
10346
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: AvatarComponent, isStandalone: false, selector: "ec-avatar", inputs: { user: "user" }, usesOnChanges: true, ngImport: i0, template: '{{label}}', isInline: true, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }); }
10345
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
10346
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: AvatarComponent, isStandalone: false, selector: "ec-avatar", inputs: { user: "user" }, usesOnChanges: true, ngImport: i0, template: '{{label}}', isInline: true, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10347
10347
  }
10348
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
10348
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AvatarComponent, decorators: [{
10349
10349
  type: Component,
10350
- args: [{ selector: 'ec-avatar', template: '{{label}}', standalone: false, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }]
10350
+ args: [{ selector: 'ec-avatar', template: '{{label}}', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{display:flex;width:2.25rem;height:2.25rem;align-items:center;justify-content:center;font-size:1rem;line-height:1.25rem;border-radius:50%;color:var(--ec-color-primary-light);text-transform:uppercase}:host.avatar-red{background-color:var(--ec-avatar-background-color-red, var(--ec-color-red-5));color:var(--ec-avatar-color-red, var(--ec-color-primary-light))}:host.avatar-orange{background-color:var(--ec-avatar-background-color-orange, var(--ec-color-orange-5));color:var(--ec-avatar-color-orange, var(--ec-color-primary-light))}:host.avatar-yellow{background-color:var(--ec-avatar-background-color-yellow, var(--ec-color-yellow-5));color:var(--ec-avatar-color-yellow, var(--ec-color-secondary-dark))}:host.avatar-green{background-color:var(--ec-avatar-background-color-green, var(--ec-color-green-5));color:var(--ec-avatar-color-green, var(--ec-color-primary-light))}:host.avatar-blue{background-color:var(--ec-avatar-background-color-blue, var(--ec-color-blue-5));color:var(--ec-avatar-color-blue, var(--ec-color-primary-light))}:host.avatar-purple{background-color:var(--ec-avatar-background-color-purple, var(--ec-color-purple-5));color:var(--ec-avatar-color-purple, var(--ec-color-primary-light))}:host.avatar-gray{background-color:var(--ec-avatar-background-color-gray, var(--ec-color-gray-3));color:var(--ec-avatar-color-gray, var(--ec-color-primary-light))}\n"] }]
10351
10351
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: AvatarService }], propDecorators: { user: [{
10352
10352
  type: Input
10353
10353
  }] } });
@@ -10374,12 +10374,12 @@ class AppBarComponent {
10374
10374
  }
10375
10375
  this.menuItems = [...this.userItem, ...this.userMenuItems];
10376
10376
  }
10377
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
10378
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", iconLink: "iconLink", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
10377
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
10378
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", iconLink: "iconLink", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10379
10379
  }
10380
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, decorators: [{
10380
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AppBarComponent, decorators: [{
10381
10381
  type: Component,
10382
- args: [{ selector: 'ec-app-bar', standalone: false, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
10382
+ args: [{ selector: 'ec-app-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"] }]
10383
10383
  }], ctorParameters: () => [{ type: AvatarService }], propDecorators: { user: [{
10384
10384
  type: Input
10385
10385
  }], userMenuItems: [{
@@ -10541,12 +10541,12 @@ class ConfirmComponent {
10541
10541
  onClick: () => { result.isSuccess ? this.onDialogSave.emit(this.context) : this.onDialogCancel.emit(); }
10542
10542
  });
10543
10543
  }
10544
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10545
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [action]=\"status?.action\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"context?.checkboxText\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"context?.textboxRequired\"\n [label]=\"context?.textboxLabel\"\n [type]=\"context?.textboxType\"\n [rows]=\"context?.textareaRows\"\n [placeholder]=\"context?.textboxPlaceholder\"\n [upperCase]=\"context?.textboxUppercase\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"context?.saveOnEnter\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n [label]=\"context?.alternateSaveLabel\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n <div [innerHTML]=\"status?.message | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
10544
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10545
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [action]=\"$safeNavigationMigration(status?.action)\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"$safeNavigationMigration(context?.message) | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"$safeNavigationMigration(context?.checkboxText)\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"$safeNavigationMigration(context?.textboxRequired)\"\n [label]=\"$safeNavigationMigration(context?.textboxLabel)\"\n [type]=\"$safeNavigationMigration(context?.textboxType)\"\n [rows]=\"$safeNavigationMigration(context?.textareaRows)\"\n [placeholder]=\"$safeNavigationMigration(context?.textboxPlaceholder)\"\n [upperCase]=\"$safeNavigationMigration(context?.textboxUppercase)\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? $safeNavigationMigration(context?.saveButtonType) : 'primary'\"\n [label]=\"context?.saveLabel ? $safeNavigationMigration(context?.saveLabel) : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"$safeNavigationMigration(context?.saveOnEnter)\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? $safeNavigationMigration(context?.alternateSaveButtonType) : 'primary'\"\n [label]=\"$safeNavigationMigration(context?.alternateSaveLabel)\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? $safeNavigationMigration(context?.cancelLabel) : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n <div [innerHTML]=\"$safeNavigationMigration(status?.message) | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10546
10546
  }
10547
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, decorators: [{
10547
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmComponent, decorators: [{
10548
10548
  type: Component,
10549
- args: [{ selector: 'ec-confirm', standalone: false, template: "<section ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [action]=\"status?.action\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"context?.checkboxText\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"context?.textboxRequired\"\n [label]=\"context?.textboxLabel\"\n [type]=\"context?.textboxType\"\n [rows]=\"context?.textareaRows\"\n [placeholder]=\"context?.textboxPlaceholder\"\n [upperCase]=\"context?.textboxUppercase\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"context?.saveOnEnter\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n [label]=\"context?.alternateSaveLabel\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n <div [innerHTML]=\"status?.message | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
10549
+ args: [{ selector: 'ec-confirm', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<section ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [action]=\"$safeNavigationMigration(status?.action)\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"$safeNavigationMigration(context?.message) | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"$safeNavigationMigration(context?.checkboxText)\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"$safeNavigationMigration(context?.textboxRequired)\"\n [label]=\"$safeNavigationMigration(context?.textboxLabel)\"\n [type]=\"$safeNavigationMigration(context?.textboxType)\"\n [rows]=\"$safeNavigationMigration(context?.textareaRows)\"\n [placeholder]=\"$safeNavigationMigration(context?.textboxPlaceholder)\"\n [upperCase]=\"$safeNavigationMigration(context?.textboxUppercase)\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? $safeNavigationMigration(context?.saveButtonType) : 'primary'\"\n [label]=\"context?.saveLabel ? $safeNavigationMigration(context?.saveLabel) : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"$safeNavigationMigration(context?.saveOnEnter)\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? $safeNavigationMigration(context?.alternateSaveButtonType) : 'primary'\"\n [label]=\"$safeNavigationMigration(context?.alternateSaveLabel)\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? $safeNavigationMigration(context?.cancelLabel) : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">{{(inlineResultSuccess ? 'Success_TC' : 'Error_TC') | translate}}</span>\n <div [innerHTML]=\"$safeNavigationMigration(status?.message) | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
10550
10550
  }], ctorParameters: () => [], propDecorators: { context: [{
10551
10551
  type: Input
10552
10552
  }], onDialogSave: [{
@@ -10686,10 +10686,10 @@ class DialogService {
10686
10686
  triggerEvent(event) {
10687
10687
  this.events.next(event);
10688
10688
  }
10689
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10690
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogService, providedIn: 'root' }); }
10689
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
10690
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, providedIn: 'root' }); }
10691
10691
  }
10692
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogService, decorators: [{
10692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, decorators: [{
10693
10693
  type: Injectable,
10694
10694
  args: [{
10695
10695
  providedIn: 'root'
@@ -10724,8 +10724,7 @@ class DialogComponent {
10724
10724
  get size() {
10725
10725
  return this._size;
10726
10726
  }
10727
- constructor(componentFactoryResolver, windowService, dialogService, documentRef) {
10728
- this.componentFactoryResolver = componentFactoryResolver;
10727
+ constructor(windowService, dialogService, documentRef) {
10729
10728
  this.windowService = windowService;
10730
10729
  this.dialogService = dialogService;
10731
10730
  this.documentRef = documentRef;
@@ -10839,8 +10838,9 @@ class DialogComponent {
10839
10838
  this.contentContainer.createEmbeddedView(component);
10840
10839
  }
10841
10840
  else {
10842
- let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
10843
- this.componentRef = this.contentContainer.createComponent(componentFactory);
10841
+ // ViewContainerRef.createComponent accepts a component type directly since Angular 13;
10842
+ // ComponentFactoryResolver was removed in Angular 22.
10843
+ this.componentRef = this.contentContainer.createComponent(component);
10844
10844
  }
10845
10845
  this.isOpen = true;
10846
10846
  this.openDialogComponent(context);
@@ -10916,16 +10916,16 @@ class DialogComponent {
10916
10916
  getDialogId() {
10917
10917
  return this.componentRef?.instance.dialogId || '';
10918
10918
  }
10919
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: WindowService }, { token: DialogService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
10920
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: DialogComponent, isStandalone: false, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "dialogSizeClass", "style.--ec-dialog-width.px": "width", "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "style.--ec-dialog-margin-align-to-top": "this.alignToTopMargin", "class.is-transparent": "this.transparentMask", "class.no-mask": "this.noMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.min-width]="minWidth" cdkTrapFocus [cdkTrapFocusAutoCapture]="updateCdkTrapFocusAutoCapture"><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
10919
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogComponent, deps: [{ token: WindowService }, { token: DialogService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
10920
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DialogComponent, isStandalone: false, selector: "ec-dialog", inputs: { size: "size", content: "content", context: "context", options: "options", dialogOpenStartEventId: "dialogOpenStartEventId" }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onOverlayClick($event)" }, properties: { "class": "dialogSizeClass", "style.--ec-dialog-width.px": "width", "class.is-open": "this.isOpen", "class.fade-in": "this.fadeIn", "class.fade-out": "this.fadeOut", "class.is-panel": "this.displayAsPanel", "class.is-top-aligned": "this.alignToTop", "style.--ec-dialog-margin-align-to-top": "this.alignToTopMargin", "class.is-transparent": "this.transparentMask", "class.no-mask": "this.noMask" } }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<article [style.min-width]="minWidth" cdkTrapFocus [cdkTrapFocusAutoCapture]="updateCdkTrapFocusAutoCapture"><ng-template #content></ng-template></article>', isInline: true, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
10921
10921
  }
10922
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogComponent, decorators: [{
10922
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogComponent, decorators: [{
10923
10923
  type: Component,
10924
10924
  args: [{ selector: 'ec-dialog', template: '<article [style.min-width]="minWidth" cdkTrapFocus [cdkTrapFocusAutoCapture]="updateCdkTrapFocusAutoCapture"><ng-template #content></ng-template></article>', host: {
10925
10925
  '[class]': 'dialogSizeClass',
10926
10926
  '[style.--ec-dialog-width.px]': 'width'
10927
- }, standalone: false, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"] }]
10928
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: WindowService }, { type: DialogService }, { type: Document, decorators: [{
10927
+ }, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panelMaskFadeIn{0%{background-color:transparent}to{background-color:var(--ec-dialog-background-color)}}:host{--ec-dialog-background-color: var(--ec-background-color-dialog);align-items:center;background-color:var(--ec-dialog-background-color);justify-content:center;position:fixed;z-index:var(--ec-z-index-dialog);inset:0;display:none}:host.is-open{display:flex}:host.fade-in{animation-name:fadeIn;animation-duration:125ms;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.fade-out{animation-name:fadeIn;animation-duration:.1s;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in-out}:host.is-panel article{position:absolute;top:0;bottom:0;right:0;max-height:none;border-right:0;border-top:0;border-bottom:0;border-radius:0;box-shadow:0 0 .5rem var(--ec-color-shadow)}:host.is-panel.fade-in{animation-name:panelMaskFadeIn;animation-duration:.25s;animation-fill-mode:forwards}:host.is-panel.fade-in article{animation-name:slideIn;animation-duration:.25s;animation-fill-mode:forwards;animation-timing-function:ease-out}:host.is-panel.fade-out{animation-name:panelMaskFadeIn;animation-direction:reverse;animation-fill-mode:forwards}:host.is-panel.fade-out article{animation-name:slideIn;animation-duration:225ms;animation-direction:reverse;animation-fill-mode:forwards;animation-timing-function:ease-in}:host.is-panel.no-mask{left:auto;width:var(--ec-dialog-width)}:host.is-top-aligned{align-items:flex-start}:host.is-top-aligned article{min-height:auto;margin-top:var(--ec-dialog-margin-align-to-top, 20vh);max-height:calc(100vh - var(--ec-dialog-margin-align-to-top, 20vh) - 5vh)}:host.is-transparent{--ec-dialog-background-color: transparent}article{background-color:var(--ec-background-color-body);background-clip:padding-box;box-shadow:0 0 .625rem #1a1a2333;border-radius:var(--ec-border-radius-dialog);overflow:hidden;display:flex;flex:none;min-height:9rem;max-height:90vh;max-width:90vw;width:var(--ec-dialog-width)}:host.dialog-xsmall{--ec-dialog-width: 20rem}:host.dialog-small{--ec-dialog-width: 30rem}:host.dialog-medium{--ec-dialog-width: 40rem}:host.dialog-large{--ec-dialog-width: 50rem}:host.dialog-xlarge{--ec-dialog-width: 60rem}:host.dialog-full{--ec-dialog-width: 90vw}\n"] }]
10928
+ }], ctorParameters: () => [{ type: WindowService }, { type: DialogService }, { type: Document, decorators: [{
10929
10929
  type: Inject,
10930
10930
  args: [DOCUMENT]
10931
10931
  }] }], propDecorators: { isOpen: [{
@@ -11021,22 +11021,22 @@ class DialogGroupComponent {
11021
11021
  this.activeDialogEvents.splice(index, 1);
11022
11022
  }
11023
11023
  }
11024
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
11025
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DialogGroupComponent, isStandalone: false, selector: "ec-dialog-group", ngImport: i0, template: "@for (dialog of activeDialogEvents; track dialog) {\n <ec-dialog\n [dialogOpenStartEventId]=\"dialog.eventId\"\n [size]=\"dialog.options?.size\"\n [content]=\"dialog.content\"\n [context]=\"dialog.context\"\n [options]=\"dialog.options\"\n (opened)=\"dialogOpened(dialog, $event)\"\n (closed)=\"dialogClosed(dialog)\">\n </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ec-dialog", inputs: ["size", "content", "context", "options", "dialogOpenStartEventId"], outputs: ["opened", "closed"] }] }); }
11024
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogGroupComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
11025
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DialogGroupComponent, isStandalone: false, selector: "ec-dialog-group", ngImport: i0, template: "@for (dialog of activeDialogEvents; track dialog) {\n <ec-dialog\n [dialogOpenStartEventId]=\"dialog.eventId\"\n [size]=\"$safeNavigationMigration(dialog.options?.size)\"\n [content]=\"dialog.content\"\n [context]=\"dialog.context\"\n [options]=\"dialog.options\"\n (opened)=\"dialogOpened(dialog, $event)\"\n (closed)=\"dialogClosed(dialog)\">\n </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ec-dialog", inputs: ["size", "content", "context", "options", "dialogOpenStartEventId"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11026
11026
  }
11027
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DialogGroupComponent, decorators: [{
11027
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogGroupComponent, decorators: [{
11028
11028
  type: Component,
11029
- args: [{ selector: 'ec-dialog-group', standalone: false, template: "@for (dialog of activeDialogEvents; track dialog) {\n <ec-dialog\n [dialogOpenStartEventId]=\"dialog.eventId\"\n [size]=\"dialog.options?.size\"\n [content]=\"dialog.content\"\n [context]=\"dialog.context\"\n [options]=\"dialog.options\"\n (opened)=\"dialogOpened(dialog, $event)\"\n (closed)=\"dialogClosed(dialog)\">\n </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"] }]
11029
+ args: [{ selector: 'ec-dialog-group', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@for (dialog of activeDialogEvents; track dialog) {\n <ec-dialog\n [dialogOpenStartEventId]=\"dialog.eventId\"\n [size]=\"$safeNavigationMigration(dialog.options?.size)\"\n [content]=\"dialog.content\"\n [context]=\"dialog.context\"\n [options]=\"dialog.options\"\n (opened)=\"dialogOpened(dialog, $event)\"\n (closed)=\"dialogClosed(dialog)\">\n </ec-dialog>\n}", styles: ["ec-dialog:not(:only-child){--ec-dialog-background-color: transparent}ec-dialog:not(:only-child):last-child,ec-dialog:not(:only-child):nth-last-child(2){--ec-dialog-background-color: var(--ec-background-color-dialog-stacked)}\n"] }]
11030
11030
  }], ctorParameters: () => [{ type: DialogService }] });
11031
11031
 
11032
11032
  /** Default No-op telemetry implementation */
11033
11033
  class TelemetryTrackerService {
11034
11034
  trackPageView(pageName, url, properties) { }
11035
11035
  trackEvent(name, properties, measurements) { }
11036
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11037
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryTrackerService, providedIn: 'root' }); }
11036
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryTrackerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11037
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryTrackerService, providedIn: 'root' }); }
11038
11038
  }
11039
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryTrackerService, decorators: [{
11039
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryTrackerService, decorators: [{
11040
11040
  type: Injectable,
11041
11041
  args: [{
11042
11042
  providedIn: 'root'
@@ -11068,10 +11068,10 @@ class TelemetryService {
11068
11068
  trackEvent(name, properties, measurements) {
11069
11069
  this.telemetryTrackerService.trackEvent(name, properties, measurements);
11070
11070
  }
11071
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryService, deps: [{ token: TelemetryTrackerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
11072
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryService, providedIn: 'root' }); }
11071
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryService, deps: [{ token: TelemetryTrackerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
11072
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryService, providedIn: 'root' }); }
11073
11073
  }
11074
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TelemetryService, decorators: [{
11074
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TelemetryService, decorators: [{
11075
11075
  type: Injectable,
11076
11076
  args: [{
11077
11077
  providedIn: 'root'
@@ -11172,10 +11172,10 @@ class HierarchyBase {
11172
11172
  setItemError(parentItem) {
11173
11173
  parentItem.status = "error";
11174
11174
  }
11175
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HierarchyBase, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
11176
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: HierarchyBase, isStandalone: true, inputs: { rootNode: "rootNode" }, outputs: { getItemChildren: "getItemChildren", itemToggled: "itemToggled" }, usesOnChanges: true, ngImport: i0 }); }
11175
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HierarchyBase, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
11176
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HierarchyBase, isStandalone: true, inputs: { rootNode: "rootNode" }, outputs: { getItemChildren: "getItemChildren", itemToggled: "itemToggled" }, usesOnChanges: true, ngImport: i0 }); }
11177
11177
  }
11178
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HierarchyBase, decorators: [{
11178
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HierarchyBase, decorators: [{
11179
11179
  type: Directive
11180
11180
  }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { rootNode: [{
11181
11181
  type: Input
@@ -11223,12 +11223,12 @@ class HierarchyTreeComponent extends HierarchyBase {
11223
11223
  this.toggleItemClicked(item, !item.expanded);
11224
11224
  }
11225
11225
  }
11226
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
11227
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: HierarchyTreeComponent, isStandalone: false, selector: "ec-hierarchy-tree", inputs: { collapsibleRootNode: "collapsibleRootNode", id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\n class=\"flex-grow scroll-y py-1\">\n\n @if (!hideRootNode && rootNode) {\n <li>\n <div class=\"item-wrapper\"\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"rootNode?.url\"\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\n @if (rootNode.hasChildren && collapsibleRootNode) {\n <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [expanded]=\"rootNode.expanded\"\n (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n </ec-collapsible-toggle>\n }\n <a id=\"rootNode_{{rootNode?.id}}_link\"\n class=\"item flex-grow d-flex align-items-center\"\n routerLink=\"{{rootNode?.url}}\"\n [queryParams]=\"rootNode?.queryParams\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n </a>\n </div>\n </li>\n }\n\n <ng-template #hierarchyView\n let-items>\n\n @for(item of items; let index = $index; let first = $first; track item) {\n @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n id=\"treeItem_{{item.id}}\">\n <div class=\"item-wrapper\"\n title=\"{{item.tooltip ?? item.label}}\"\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n <!-- This element provides the indentation for each level -->\n @if (!item.noIndent) {\n <span id=\"indent_{{item.id}}\"\n class=\"d-block h-100\"\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n </span>\n }\n\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\n @if (item.hasChildren && !item.hideToggle) {\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [hidden]=\"item.status === 'pending'\"\n [expanded]=\"item.expanded\"\n (expandedChange)=\"toggleItemClicked(item, $event)\">\n </ec-collapsible-toggle>\n }\n\n <i class=\"ec-icon icon-loading my-1\"\n [hidden]=\"item.status !== 'pending'\"></i>\n\n @if (item.url) {\n <a id=\"treeItem_{{item.id}}_link\"\n class=\"item\"\n (click)=\"selectItem(item)\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams\"\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div id=\"treeItem_{{item.id}}_heading\"\n class=\"item\"\n (click)=\"selectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n </div>\n\n\n @if (item.children.length > 0 && item.expanded) {\n <ul>\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n </ul>\n }\n </li>\n }\n }\n\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n let-item>\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n [attr.title]=\"item.iconTooltip\"\n ></i>\n }\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] }); }
11226
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
11227
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HierarchyTreeComponent, isStandalone: false, selector: "ec-hierarchy-tree", inputs: { collapsibleRootNode: "collapsibleRootNode", id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\n class=\"flex-grow scroll-y py-1\">\n\n @if (!hideRootNode && rootNode) {\n <li>\n <div class=\"item-wrapper\"\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"$safeNavigationMigration(rootNode?.url)\"\n [ecNavItemActiveExactMatch]='$safeNavigationMigration(rootNode?.isActiveExactMatch)'>\n @if (rootNode.hasChildren && collapsibleRootNode) {\n <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [expanded]=\"rootNode.expanded\"\n (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n </ec-collapsible-toggle>\n }\n <a id=\"rootNode_{{rootNode?.id}}_link\"\n class=\"item flex-grow d-flex align-items-center\"\n routerLink=\"{{rootNode?.url}}\"\n [queryParams]=\"$safeNavigationMigration(rootNode?.queryParams)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n </a>\n </div>\n </li>\n }\n\n <ng-template #hierarchyView\n let-items>\n\n @for(item of items; let index = $index; let first = $first; track item) {\n @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n id=\"treeItem_{{item.id}}\">\n <div class=\"item-wrapper\"\n title=\"{{item.tooltip ?? item.label}}\"\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n <!-- This element provides the indentation for each level -->\n @if (!item.noIndent) {\n <span id=\"indent_{{item.id}}\"\n class=\"d-block h-100\"\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n </span>\n }\n\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\n @if (item.hasChildren && !item.hideToggle) {\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [hidden]=\"item.status === 'pending'\"\n [expanded]=\"item.expanded\"\n (expandedChange)=\"toggleItemClicked(item, $event)\">\n </ec-collapsible-toggle>\n }\n\n <i class=\"ec-icon icon-loading my-1\"\n [hidden]=\"item.status !== 'pending'\"></i>\n\n @if (item.url) {\n <a id=\"treeItem_{{item.id}}_link\"\n class=\"item\"\n (click)=\"selectItem(item)\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams\"\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div id=\"treeItem_{{item.id}}_heading\"\n class=\"item\"\n (click)=\"selectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n </div>\n\n\n @if (item.children.length > 0 && item.expanded) {\n <ul>\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n </ul>\n }\n </li>\n }\n }\n\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: $safeNavigationMigration(rootNode?.children) }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n let-item>\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n [attr.title]=\"item.iconTooltip\"\n ></i>\n }\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11228
11228
  }
11229
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
11229
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
11230
11230
  type: Component,
11231
- args: [{ selector: 'ec-hierarchy-tree', standalone: false, template: "<ul id=\"{{scrollContainerId}}\"\n class=\"flex-grow scroll-y py-1\">\n\n @if (!hideRootNode && rootNode) {\n <li>\n <div class=\"item-wrapper\"\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"rootNode?.url\"\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\n @if (rootNode.hasChildren && collapsibleRootNode) {\n <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [expanded]=\"rootNode.expanded\"\n (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n </ec-collapsible-toggle>\n }\n <a id=\"rootNode_{{rootNode?.id}}_link\"\n class=\"item flex-grow d-flex align-items-center\"\n routerLink=\"{{rootNode?.url}}\"\n [queryParams]=\"rootNode?.queryParams\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n </a>\n </div>\n </li>\n }\n\n <ng-template #hierarchyView\n let-items>\n\n @for(item of items; let index = $index; let first = $first; track item) {\n @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n id=\"treeItem_{{item.id}}\">\n <div class=\"item-wrapper\"\n title=\"{{item.tooltip ?? item.label}}\"\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n <!-- This element provides the indentation for each level -->\n @if (!item.noIndent) {\n <span id=\"indent_{{item.id}}\"\n class=\"d-block h-100\"\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n </span>\n }\n\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\n @if (item.hasChildren && !item.hideToggle) {\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [hidden]=\"item.status === 'pending'\"\n [expanded]=\"item.expanded\"\n (expandedChange)=\"toggleItemClicked(item, $event)\">\n </ec-collapsible-toggle>\n }\n\n <i class=\"ec-icon icon-loading my-1\"\n [hidden]=\"item.status !== 'pending'\"></i>\n\n @if (item.url) {\n <a id=\"treeItem_{{item.id}}_link\"\n class=\"item\"\n (click)=\"selectItem(item)\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams\"\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div id=\"treeItem_{{item.id}}_heading\"\n class=\"item\"\n (click)=\"selectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n </div>\n\n\n @if (item.children.length > 0 && item.expanded) {\n <ul>\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n </ul>\n }\n </li>\n }\n }\n\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n let-item>\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n [attr.title]=\"item.iconTooltip\"\n ></i>\n }\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
11231
+ args: [{ selector: 'ec-hierarchy-tree', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ul id=\"{{scrollContainerId}}\"\n class=\"flex-grow scroll-y py-1\">\n\n @if (!hideRootNode && rootNode) {\n <li>\n <div class=\"item-wrapper\"\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"$safeNavigationMigration(rootNode?.url)\"\n [ecNavItemActiveExactMatch]='$safeNavigationMigration(rootNode?.isActiveExactMatch)'>\n @if (rootNode.hasChildren && collapsibleRootNode) {\n <ec-collapsible-toggle id=\"toggle_{{rootNode.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [expanded]=\"rootNode.expanded\"\n (expandedChange)=\"toggleItemClicked(rootNode, $event)\">\n </ec-collapsible-toggle>\n }\n <a id=\"rootNode_{{rootNode?.id}}_link\"\n class=\"item flex-grow d-flex align-items-center\"\n routerLink=\"{{rootNode?.url}}\"\n [queryParams]=\"$safeNavigationMigration(rootNode?.queryParams)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\n </a>\n </div>\n </li>\n }\n\n <ng-template #hierarchyView\n let-items>\n\n @for(item of items; let index = $index; let first = $first; track item) {\n @if(!collapsibleRootNode || (hideRootNode ? true : rootNode.expanded)) {\n <li [ngClass]=\"{'divider': item.display === 'divider'}\"\n id=\"treeItem_{{item.id}}\">\n <div class=\"item-wrapper\"\n title=\"{{item.tooltip ?? item.label}}\"\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\n\n <!-- This element provides the indentation for each level -->\n @if (!item.noIndent) {\n <span id=\"indent_{{item.id}}\"\n class=\"d-block h-100\"\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\n </span>\n }\n\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\n @if (item.hasChildren && !item.hideToggle) {\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\n class=\"flex-shrink\"\n [style.width.px]=\"indent\"\n [hidden]=\"item.status === 'pending'\"\n [expanded]=\"item.expanded\"\n (expandedChange)=\"toggleItemClicked(item, $event)\">\n </ec-collapsible-toggle>\n }\n\n <i class=\"ec-icon icon-loading my-1\"\n [hidden]=\"item.status !== 'pending'\"></i>\n\n @if (item.url) {\n <a id=\"treeItem_{{item.id}}_link\"\n class=\"item\"\n (click)=\"selectItem(item)\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams\"\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div id=\"treeItem_{{item.id}}_heading\"\n class=\"item\"\n (click)=\"selectItem(item)\">\n <ng-container\n *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n </div>\n\n\n @if (item.children.length > 0 && item.expanded) {\n <ul>\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\n </ul>\n }\n </li>\n }\n }\n\n </ng-template>\n\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: $safeNavigationMigration(rootNode?.children) }\"></ng-container>\n</ul>\n\n<ng-template #defaultItemTemplate\n let-item>\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\n [attr.title]=\"item.iconTooltip\"\n ></i>\n }\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
11232
11232
  }], ctorParameters: () => [{ type: ScrollService }, { type: i0.Injector }], propDecorators: { collapsibleRootNode: [{
11233
11233
  type: Input
11234
11234
  }], id: [{
@@ -11291,12 +11291,12 @@ class ItemDisplayComponent {
11291
11291
  get url() {
11292
11292
  return this._url;
11293
11293
  }
11294
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11295
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ItemDisplayComponent, isStandalone: false, selector: "ec-item-display", inputs: { id: "id", label: "label", labelHelpPopover: "labelHelpPopover", value: "value", url: "url", queryParams: "queryParams", condensed: "condensed", target: "target" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div id=\"{{id}}_label_0\"\n class=\"text-caption-1 d-flex align-items-center\">\n <span>{{label | translate}}</span>\n @if (labelHelpPopover) {\n <ec-help-popover\n class=\"mx-n1 my-n2\"\n [text]=\"labelHelpPopover.text\"\n [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n </ec-help-popover>\n }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n title=\"{{internalValue.tooltip}}\">\n\n @if (url) {\n @if (!externalLink) {\n <a\n id=\"{{id}}_link\"\n [routerLink]=\"url\"\n [queryParams]=\"queryParams\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (externalLink) {\n <a\n id=\"{{id}}_link\"\n href=\"{{url}}\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n\n<ng-template #content>\n @if (internalValue?.icon) {\n <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n }\n <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
11294
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ItemDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11295
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ItemDisplayComponent, isStandalone: false, selector: "ec-item-display", inputs: { id: "id", label: "label", labelHelpPopover: "labelHelpPopover", value: "value", url: "url", queryParams: "queryParams", condensed: "condensed", target: "target" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<div id=\"{{id}}_label_0\"\n class=\"text-caption-1 d-flex align-items-center\">\n <span>{{label | translate}}</span>\n @if (labelHelpPopover) {\n <ec-help-popover\n class=\"mx-n1 my-n2\"\n [text]=\"labelHelpPopover.text\"\n [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n </ec-help-popover>\n }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n title=\"{{internalValue.tooltip}}\">\n\n @if (url) {\n @if (!externalLink) {\n <a\n id=\"{{id}}_link\"\n [routerLink]=\"url\"\n [queryParams]=\"queryParams\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (externalLink) {\n <a\n id=\"{{id}}_link\"\n href=\"{{url}}\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n\n<ng-template #content>\n @if (internalValue?.icon) {\n <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n }\n <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11296
11296
  }
11297
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemDisplayComponent, decorators: [{
11297
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ItemDisplayComponent, decorators: [{
11298
11298
  type: Component,
11299
- args: [{ selector: 'ec-item-display', standalone: false, template: "<div id=\"{{id}}_label_0\"\n class=\"text-caption-1 d-flex align-items-center\">\n <span>{{label | translate}}</span>\n @if (labelHelpPopover) {\n <ec-help-popover\n class=\"mx-n1 my-n2\"\n [text]=\"labelHelpPopover.text\"\n [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n </ec-help-popover>\n }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n title=\"{{internalValue.tooltip}}\">\n\n @if (url) {\n @if (!externalLink) {\n <a\n id=\"{{id}}_link\"\n [routerLink]=\"url\"\n [queryParams]=\"queryParams\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (externalLink) {\n <a\n id=\"{{id}}_link\"\n href=\"{{url}}\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n\n<ng-template #content>\n @if (internalValue?.icon) {\n <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n }\n <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"] }]
11299
+ args: [{ selector: 'ec-item-display', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div id=\"{{id}}_label_0\"\n class=\"text-caption-1 d-flex align-items-center\">\n <span>{{label | translate}}</span>\n @if (labelHelpPopover) {\n <ec-help-popover\n class=\"mx-n1 my-n2\"\n [text]=\"labelHelpPopover.text\"\n [contentPosition]=\"labelHelpPopover?.contentPosition ?? 'top-left'\"\n [maxWidth]=\"labelHelpPopover?.maxWidth ?? '15rem'\">\n </ec-help-popover>\n }\n</div>\n\n<div id=\"{{id}}_value_0\" class=\"{{condensed ? 'text-body-2' : 'text-display-1'}} {{internalValue.classnames}}\"\n [class.font-color-hint]=\"!internalValue.value && internalValue.noValueText\"\n title=\"{{internalValue.tooltip}}\">\n\n @if (url) {\n @if (!externalLink) {\n <a\n id=\"{{id}}_link\"\n [routerLink]=\"url\"\n [queryParams]=\"queryParams\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (externalLink) {\n <a\n id=\"{{id}}_link\"\n href=\"{{url}}\"\n target=\"{{target}}\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n }\n</div>\n\n\n<ng-template #content>\n @if (internalValue?.icon) {\n <i class=\"ec-icon {{internalValue?.icon}}\"></i>\n }\n <span>{{(internalValue?.value || internalValue?.noValueText) | translate}}</span>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;margin-bottom:1rem;vertical-align:top}.ec-icon{font-size:1em;top:.125em;position:relative;margin-right:.25em}\n"] }]
11300
11300
  }], propDecorators: { id: [{
11301
11301
  type: HostBinding,
11302
11302
  args: ['attr.id']
@@ -11359,12 +11359,12 @@ class JsonDisplayComponent {
11359
11359
  this.jsonDisplay.patchValue(display);
11360
11360
  }
11361
11361
  }
11362
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonDisplayComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
11363
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] }); }
11362
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: JsonDisplayComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
11363
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11364
11364
  }
11365
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonDisplayComponent, decorators: [{
11365
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: JsonDisplayComponent, decorators: [{
11366
11366
  type: Component,
11367
- args: [{ selector: 'ec-json-display', standalone: false, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
11367
+ args: [{ selector: 'ec-json-display', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
11368
11368
  }], ctorParameters: () => [{ type: i3.TranslateService }], propDecorators: { id: [{
11369
11369
  type: Input
11370
11370
  }], attrId: [{
@@ -11411,18 +11411,18 @@ class ResizableComponent extends ResizableBase {
11411
11411
  restoreWidths(widths) {
11412
11412
  this.setWidth(widths[0]);
11413
11413
  }
11414
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
11415
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ResizableComponent, isStandalone: false, selector: "ec-resizable", usesInheritance: true, ngImport: i0, template: `<div class="content">
11414
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CacheService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
11415
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ResizableComponent, isStandalone: false, selector: "ec-resizable", usesInheritance: true, ngImport: i0, template: `<div class="content">
11416
11416
  <ng-content></ng-content>
11417
11417
  </div>
11418
- <div class="handle" (mousedown)="startDrag($event)"></div>`, isInline: true, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }); }
11418
+ <div class="handle" (mousedown)="startDrag($event)"></div>`, isInline: true, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11419
11419
  }
11420
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableComponent, decorators: [{
11420
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ResizableComponent, decorators: [{
11421
11421
  type: Component,
11422
11422
  args: [{ selector: 'ec-resizable', template: `<div class="content">
11423
11423
  <ng-content></ng-content>
11424
11424
  </div>
11425
- <div class="handle" (mousedown)="startDrag($event)"></div>`, standalone: false, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }]
11425
+ <div class="handle" (mousedown)="startDrag($event)"></div>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }]
11426
11426
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: CacheService }, { type: Document, decorators: [{
11427
11427
  type: Inject,
11428
11428
  args: [DOCUMENT]
@@ -11450,10 +11450,10 @@ class SplashService {
11450
11450
  hideSplash() {
11451
11451
  this._splashVisibility.next({ show: false });
11452
11452
  }
11453
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11454
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashService, providedIn: 'root' }); }
11453
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SplashService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11454
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SplashService, providedIn: 'root' }); }
11455
11455
  }
11456
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashService, decorators: [{
11456
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SplashService, decorators: [{
11457
11457
  type: Injectable,
11458
11458
  args: [{
11459
11459
  providedIn: 'root'
@@ -11508,21 +11508,21 @@ class SplashComponent {
11508
11508
  this.currentMessageIndex = nextIndex >= this.messages.length ? 0 : nextIndex;
11509
11509
  });
11510
11510
  }
11511
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashComponent, deps: [{ token: SplashService }], target: i0.ɵɵFactoryTarget.Component }); }
11512
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: SplashComponent, isStandalone: false, selector: "ec-splash", ngImport: i0, template: "<div class=\"app-splash\"\n [class.app-loaded]=\"!isVisible\">\n <div class=\"splash-loader\"\n role=\"status\"\n aria-live=\"polite\">\n <div class=\"splash-icon-wrapper\">\n <img src=\"/assets/images/splash-electric.svg\"\n alt=\"Electricity Icon\" />\n <img src=\"/assets/images/splash-water.svg\"\n alt=\"Water Icon\" />\n <img src=\"/assets/images/splash-interval.svg\"\n alt=\"Interval Data Icon\" />\n <img src=\"/assets/images/splash-seedling.svg\"\n alt=\"Seedling Icon\" />\n </div>\n </div>\n\n @if ((messages && messages.length > 0) || title) {\n <div class=\"splash-message-container\">\n @if (title) {\n <h1 class=\"splash-title\">{{title}}</h1>\n }\n @if (messages && messages.length > 0) {\n @for (message of messages; track $index; let i = $index) {\n <p class=\"splash-message\"\n [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n } }\n </div>\n }\n</div>" }); }
11511
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SplashComponent, deps: [{ token: SplashService }], target: i0.ɵɵFactoryTarget.Component }); }
11512
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SplashComponent, isStandalone: false, selector: "ec-splash", ngImport: i0, template: "<div class=\"app-splash\"\n [class.app-loaded]=\"!isVisible\">\n <div class=\"splash-loader\"\n role=\"status\"\n aria-live=\"polite\">\n <div class=\"splash-icon-wrapper\">\n <img src=\"/assets/images/splash-electric.svg\"\n alt=\"Electricity Icon\" />\n <img src=\"/assets/images/splash-water.svg\"\n alt=\"Water Icon\" />\n <img src=\"/assets/images/splash-interval.svg\"\n alt=\"Interval Data Icon\" />\n <img src=\"/assets/images/splash-seedling.svg\"\n alt=\"Seedling Icon\" />\n </div>\n </div>\n\n @if ((messages && messages.length > 0) || title) {\n <div class=\"splash-message-container\">\n @if (title) {\n <h1 class=\"splash-title\">{{title}}</h1>\n }\n @if (messages && messages.length > 0) {\n @for (message of messages; track $index; let i = $index) {\n <p class=\"splash-message\"\n [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n } }\n </div>\n }\n</div>", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11513
11513
  }
11514
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SplashComponent, decorators: [{
11514
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SplashComponent, decorators: [{
11515
11515
  type: Component,
11516
- args: [{ selector: 'ec-splash', standalone: false, template: "<div class=\"app-splash\"\n [class.app-loaded]=\"!isVisible\">\n <div class=\"splash-loader\"\n role=\"status\"\n aria-live=\"polite\">\n <div class=\"splash-icon-wrapper\">\n <img src=\"/assets/images/splash-electric.svg\"\n alt=\"Electricity Icon\" />\n <img src=\"/assets/images/splash-water.svg\"\n alt=\"Water Icon\" />\n <img src=\"/assets/images/splash-interval.svg\"\n alt=\"Interval Data Icon\" />\n <img src=\"/assets/images/splash-seedling.svg\"\n alt=\"Seedling Icon\" />\n </div>\n </div>\n\n @if ((messages && messages.length > 0) || title) {\n <div class=\"splash-message-container\">\n @if (title) {\n <h1 class=\"splash-title\">{{title}}</h1>\n }\n @if (messages && messages.length > 0) {\n @for (message of messages; track $index; let i = $index) {\n <p class=\"splash-message\"\n [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n } }\n </div>\n }\n</div>" }]
11516
+ args: [{ selector: 'ec-splash', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"app-splash\"\n [class.app-loaded]=\"!isVisible\">\n <div class=\"splash-loader\"\n role=\"status\"\n aria-live=\"polite\">\n <div class=\"splash-icon-wrapper\">\n <img src=\"/assets/images/splash-electric.svg\"\n alt=\"Electricity Icon\" />\n <img src=\"/assets/images/splash-water.svg\"\n alt=\"Water Icon\" />\n <img src=\"/assets/images/splash-interval.svg\"\n alt=\"Interval Data Icon\" />\n <img src=\"/assets/images/splash-seedling.svg\"\n alt=\"Seedling Icon\" />\n </div>\n </div>\n\n @if ((messages && messages.length > 0) || title) {\n <div class=\"splash-message-container\">\n @if (title) {\n <h1 class=\"splash-title\">{{title}}</h1>\n }\n @if (messages && messages.length > 0) {\n @for (message of messages; track $index; let i = $index) {\n <p class=\"splash-message\"\n [class.is-visible]=\"i === currentMessageIndex\">{{message}}</p>\n } }\n </div>\n }\n</div>" }]
11517
11517
  }], ctorParameters: () => [{ type: SplashService }] });
11518
11518
 
11519
11519
  class TableMasterHeaderRowComponent {
11520
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableMasterHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11521
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TableMasterHeaderRowComponent, isStandalone: false, selector: "[ecTableMasterHeaderRow]", inputs: { hideTableMaster: "hideTableMaster" }, ngImport: i0, template: `@if (!hideTableMaster) {<th></th>}<ng-content></ng-content>`, isInline: true, styles: ["th{width:1.5rem;padding:.25rem 0!important;vertical-align:top}th ::ng-deep+th,th ::ng-deep+th.is-resizable{padding-left:0}\n"] }); }
11520
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableMasterHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11521
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableMasterHeaderRowComponent, isStandalone: false, selector: "[ecTableMasterHeaderRow]", inputs: { hideTableMaster: "hideTableMaster" }, ngImport: i0, template: `@if (!hideTableMaster) {<th></th>}<ng-content></ng-content>`, isInline: true, styles: ["th{width:1.5rem;padding:.25rem 0!important;vertical-align:top}th ::ng-deep+th,th ::ng-deep+th.is-resizable{padding-left:0}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11522
11522
  }
11523
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TableMasterHeaderRowComponent, decorators: [{
11523
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableMasterHeaderRowComponent, decorators: [{
11524
11524
  type: Component,
11525
- args: [{ selector: '[ecTableMasterHeaderRow]', template: `@if (!hideTableMaster) {<th></th>}<ng-content></ng-content>`, standalone: false, styles: ["th{width:1.5rem;padding:.25rem 0!important;vertical-align:top}th ::ng-deep+th,th ::ng-deep+th.is-resizable{padding-left:0}\n"] }]
11525
+ args: [{ selector: '[ecTableMasterHeaderRow]', template: `@if (!hideTableMaster) {<th></th>}<ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: ["th{width:1.5rem;padding:.25rem 0!important;vertical-align:top}th ::ng-deep+th,th ::ng-deep+th.is-resizable{padding-left:0}\n"] }]
11526
11526
  }], propDecorators: { hideTableMaster: [{
11527
11527
  type: Input
11528
11528
  }] } });
@@ -11556,10 +11556,10 @@ class ToastService {
11556
11556
  const event = new ToastEvent('remove', toast, source);
11557
11557
  this._events.next(event);
11558
11558
  }
11559
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11560
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToastService, providedIn: 'root' }); }
11559
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
11560
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, providedIn: 'root' }); }
11561
11561
  }
11562
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToastService, decorators: [{
11562
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, decorators: [{
11563
11563
  type: Injectable,
11564
11564
  args: [{
11565
11565
  providedIn: 'root'
@@ -11613,12 +11613,12 @@ class ToastComponent {
11613
11613
  }
11614
11614
  });
11615
11615
  }
11616
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
11617
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ToastComponent, isStandalone: false, selector: "ec-toast", inputs: { toastItem: "toastItem" }, outputs: { closed: "closed" }, host: { properties: { "attr.id": "this.id", "class.is-open": "this.open", "style.--toast-animation-duration.ms": "this.TOAST_ANIMATION_DURATION" } }, usesOnChanges: true, ngImport: i0, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n [type]=\"toastItem?.type\"\n bannerStyle=\"toast\"\n [customIcon]=\"toastItem?.icon\"\n [showCloseBtn]=\"toastItem?.dismissible\"\n [autoHideOnClose]=\"false\"\n (closed)=\"closeClicked()\">\n <div class=\"d-flex\">\n <div id=\"{{toastItem?.id}}_message\"\n [innerHTML]=\"toastItem?.message | translate\"></div>\n @if (toastItem?.action && toastItem?.actionLabel) {\n <button id=\"{{toastItem?.id}}_action\"\n ecLinkButton\n class=\"font-weight-bold ml-2\"\n (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\n }\n </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
11616
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
11617
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToastComponent, isStandalone: false, selector: "ec-toast", inputs: { toastItem: "toastItem" }, outputs: { closed: "closed" }, host: { properties: { "attr.id": "this.id", "class.is-open": "this.open", "style.--toast-animation-duration.ms": "this.TOAST_ANIMATION_DURATION" } }, usesOnChanges: true, ngImport: i0, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n [type]=\"$safeNavigationMigration(toastItem?.type)\"\n bannerStyle=\"toast\"\n [customIcon]=\"$safeNavigationMigration(toastItem?.icon)\"\n [showCloseBtn]=\"$safeNavigationMigration(toastItem?.dismissible)\"\n [autoHideOnClose]=\"false\"\n (closed)=\"closeClicked()\">\n <div class=\"d-flex\">\n <div id=\"{{toastItem?.id}}_message\"\n [innerHTML]=\"$safeNavigationMigration(toastItem?.message) | translate\"></div>\n @if (toastItem?.action && toastItem?.actionLabel) {\n <button id=\"{{toastItem?.id}}_action\"\n ecLinkButton\n class=\"font-weight-bold ml-2\"\n (click)=\"toastItem!.action!()\">{{$safeNavigationMigration(toastItem?.actionLabel) | translate}}</button>\n }\n </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11618
11618
  }
11619
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToastComponent, decorators: [{
11619
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, decorators: [{
11620
11620
  type: Component,
11621
- args: [{ selector: 'ec-toast', standalone: false, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n [type]=\"toastItem?.type\"\n bannerStyle=\"toast\"\n [customIcon]=\"toastItem?.icon\"\n [showCloseBtn]=\"toastItem?.dismissible\"\n [autoHideOnClose]=\"false\"\n (closed)=\"closeClicked()\">\n <div class=\"d-flex\">\n <div id=\"{{toastItem?.id}}_message\"\n [innerHTML]=\"toastItem?.message | translate\"></div>\n @if (toastItem?.action && toastItem?.actionLabel) {\n <button id=\"{{toastItem?.id}}_action\"\n ecLinkButton\n class=\"font-weight-bold ml-2\"\n (click)=\"toastItem!.action!()\">{{toastItem?.actionLabel | translate}}</button>\n }\n </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"] }]
11621
+ args: [{ selector: 'ec-toast', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ec-banner id=\"{{toastItem?.id}}_banner\"\n [type]=\"$safeNavigationMigration(toastItem?.type)\"\n bannerStyle=\"toast\"\n [customIcon]=\"$safeNavigationMigration(toastItem?.icon)\"\n [showCloseBtn]=\"$safeNavigationMigration(toastItem?.dismissible)\"\n [autoHideOnClose]=\"false\"\n (closed)=\"closeClicked()\">\n <div class=\"d-flex\">\n <div id=\"{{toastItem?.id}}_message\"\n [innerHTML]=\"$safeNavigationMigration(toastItem?.message) | translate\"></div>\n @if (toastItem?.action && toastItem?.actionLabel) {\n <button id=\"{{toastItem?.id}}_action\"\n ecLinkButton\n class=\"font-weight-bold ml-2\"\n (click)=\"toastItem!.action!()\">{{$safeNavigationMigration(toastItem?.actionLabel) | translate}}</button>\n }\n </div>\n</ec-banner>", styles: [":host{display:block;position:fixed;bottom:0;left:50%;transform:translate(-50%,150%);transition:transform var(--toast-animation-duration, .25s);transition-timing-function:ease-in;z-index:var(--ec-z-index-toast)}:host.is-open{transform:translate(-50%,calc(-1 * var(--toast-bottom, 0rem) - 1.5rem));transition-timing-function:cubic-bezier(.18,.89,.32,1.28)}\n"] }]
11622
11622
  }], ctorParameters: () => [{ type: ToastService }], propDecorators: { toastItem: [{
11623
11623
  type: Input
11624
11624
  }], id: [{
@@ -11730,12 +11730,12 @@ class ToasterComponent {
11730
11730
  toastAction: event.toast.actionLabel ?? '',
11731
11731
  });
11732
11732
  }
11733
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: TelemetryService }], target: i0.ɵɵFactoryTarget.Component }); }
11734
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ToasterComponent, isStandalone: false, selector: "ec-toaster", viewQueries: [{ propertyName: "timedToastEl", first: true, predicate: ["timedToast"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n [toastItem]=\"currentTimedToast\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>", dependencies: [{ kind: "component", type: ToastComponent, selector: "ec-toast", inputs: ["toastItem"], outputs: ["closed"] }] }); }
11733
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToasterComponent, deps: [{ token: ToastService }, { token: TelemetryService }], target: i0.ɵɵFactoryTarget.Component }); }
11734
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ToasterComponent, isStandalone: false, selector: "ec-toaster", viewQueries: [{ propertyName: "timedToastEl", first: true, predicate: ["timedToast"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n [toastItem]=\"currentTimedToast\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>", dependencies: [{ kind: "component", type: ToastComponent, selector: "ec-toast", inputs: ["toastItem"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
11735
11735
  }
11736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ToasterComponent, decorators: [{
11736
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToasterComponent, decorators: [{
11737
11737
  type: Component,
11738
- args: [{ selector: 'ec-toaster', standalone: false, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n [toastItem]=\"currentTimedToast\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>" }]
11738
+ args: [{ selector: 'ec-toaster', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ec-toast [toastItem]=\"currentDismissibleToast\"\n [style.--toast-bottom.rem]=\"dismissibleToastBottom\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>\n\n<ec-toast #timedToast\n [toastItem]=\"currentTimedToast\"\n (closed)=\"updateVisibleToast($event)\">\n</ec-toast>" }]
11739
11739
  }], ctorParameters: () => [{ type: ToastService }, { type: TelemetryService }], propDecorators: { timedToastEl: [{
11740
11740
  type: ViewChild,
11741
11741
  args: ['timedToast', { static: false, read: ElementRef }]
@@ -11937,10 +11937,10 @@ class TooltipDirective {
11937
11937
  ngOnDestroy() {
11938
11938
  this.interrupt.next();
11939
11939
  }
11940
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipDirective, deps: [{ token: TooltipService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
11941
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: TooltipDirective, isStandalone: false, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave($event)", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, ngImport: i0 }); }
11940
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipDirective, deps: [{ token: TooltipService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
11941
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TooltipDirective, isStandalone: false, selector: "[ecTooltip]", inputs: { tooltipConfig: "tooltipConfig", tooltipText: "tooltipText", tooltipCustomContent: "tooltipCustomContent", tooltipPosition: "tooltipPosition" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave($event)", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, ngImport: i0 }); }
11942
11942
  }
11943
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
11943
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TooltipDirective, decorators: [{
11944
11944
  type: Directive,
11945
11945
  args: [{
11946
11946
  selector: '[ecTooltip]',
@@ -12039,12 +12039,12 @@ class TreeComponent {
12039
12039
  this.hierarchyTreeComponent.scrollToSelectedItem();
12040
12040
  }
12041
12041
  }
12042
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12043
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
12042
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12043
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
12044
12044
  }
12045
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeComponent, decorators: [{
12045
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TreeComponent, decorators: [{
12046
12046
  type: Component,
12047
- args: [{ selector: 'ec-tree', standalone: false, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
12047
+ args: [{ selector: 'ec-tree', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"] }]
12048
12048
  }], ctorParameters: () => [], propDecorators: { attrId: [{
12049
12049
  type: HostBinding,
12050
12050
  args: ['attr.id']
@@ -12107,10 +12107,10 @@ class ClickAreaForDirective {
12107
12107
  this.targetEl.dispatchEvent(new Event('click'));
12108
12108
  }
12109
12109
  }
12110
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ClickAreaForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
12111
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ClickAreaForDirective, isStandalone: false, selector: "[ecClickAreaFor]", inputs: { targetEl: ["ecClickAreaFor", "targetEl"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cursor-pointer": "this.targetEl" } }, ngImport: i0 }); }
12110
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ClickAreaForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
12111
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ClickAreaForDirective, isStandalone: false, selector: "[ecClickAreaFor]", inputs: { targetEl: ["ecClickAreaFor", "targetEl"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.cursor-pointer": "this.targetEl" } }, ngImport: i0 }); }
12112
12112
  }
12113
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ClickAreaForDirective, decorators: [{
12113
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ClickAreaForDirective, decorators: [{
12114
12114
  type: Directive,
12115
12115
  args: [{
12116
12116
  selector: '[ecClickAreaFor]',
@@ -12220,10 +12220,10 @@ class IfViewportWidthDirective {
12220
12220
  this.isVisible = false;
12221
12221
  }
12222
12222
  }
12223
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IfViewportWidthDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: WindowService }], target: i0.ɵɵFactoryTarget.Directive }); }
12224
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: IfViewportWidthDirective, isStandalone: false, selector: "[ecIfViewportWidth]", inputs: { width: ["ecIfViewportWidth", "width"] }, ngImport: i0 }); }
12223
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: IfViewportWidthDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: WindowService }], target: i0.ɵɵFactoryTarget.Directive }); }
12224
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: IfViewportWidthDirective, isStandalone: false, selector: "[ecIfViewportWidth]", inputs: { width: ["ecIfViewportWidth", "width"] }, ngImport: i0 }); }
12225
12225
  }
12226
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: IfViewportWidthDirective, decorators: [{
12226
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: IfViewportWidthDirective, decorators: [{
12227
12227
  type: Directive,
12228
12228
  args: [{
12229
12229
  selector: '[ecIfViewportWidth]',
@@ -12260,10 +12260,10 @@ class DateDisplayPipe2 {
12260
12260
  }
12261
12261
  return DateTimeHelper.formatDate(date, formatString, displayInUTC);
12262
12262
  }
12263
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12264
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, isStandalone: false, name: "dateDisplay2" }); }
12263
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe2, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12264
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe2, isStandalone: false, name: "dateDisplay2" }); }
12265
12265
  }
12266
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, decorators: [{
12266
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe2, decorators: [{
12267
12267
  type: Pipe,
12268
12268
  args: [{
12269
12269
  name: 'dateDisplay2',
@@ -12303,10 +12303,10 @@ class DateDisplayPipe3 {
12303
12303
  formatString += ' ZZZZ';
12304
12304
  return DateTimeHelper.formatDate(date, formatString, !!displayInUTC);
12305
12305
  }
12306
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12307
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, isStandalone: false, name: "dateDisplay3" }); }
12306
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe3, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12307
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe3, isStandalone: false, name: "dateDisplay3" }); }
12308
12308
  }
12309
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, decorators: [{
12309
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateDisplayPipe3, decorators: [{
12310
12310
  type: Pipe,
12311
12311
  args: [{
12312
12312
  name: 'dateDisplay3',
@@ -12341,10 +12341,10 @@ class TimeDisplayPipe {
12341
12341
  });
12342
12342
  return DateTimeHelper.formatDate(time ?? null, this.lastFormatString);
12343
12343
  }
12344
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12345
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, isStandalone: false, name: "timeDisplay" }); }
12344
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12345
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: TimeDisplayPipe, isStandalone: false, name: "timeDisplay" }); }
12346
12346
  }
12347
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, decorators: [{
12347
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimeDisplayPipe, decorators: [{
12348
12348
  type: Pipe,
12349
12349
  args: [{
12350
12350
  name: 'timeDisplay',
@@ -12398,10 +12398,10 @@ class RelativeDatePipe {
12398
12398
  }
12399
12399
  return `${prefixValue}${displayValue}${timeDisplay}`;
12400
12400
  }
12401
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RelativeDatePipe, deps: [{ token: DateDisplayPipe }, { token: TimeDisplayPipe }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12402
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: RelativeDatePipe, isStandalone: false, name: "relativeDate" }); }
12401
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RelativeDatePipe, deps: [{ token: DateDisplayPipe }, { token: TimeDisplayPipe }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
12402
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: RelativeDatePipe, isStandalone: false, name: "relativeDate" }); }
12403
12403
  }
12404
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RelativeDatePipe, decorators: [{
12404
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RelativeDatePipe, decorators: [{
12405
12405
  type: Pipe,
12406
12406
  args: [{
12407
12407
  name: 'relativeDate',
@@ -12410,14 +12410,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
12410
12410
  }], ctorParameters: () => [{ type: DateDisplayPipe }, { type: TimeDisplayPipe }, { type: i3.TranslateService }] });
12411
12411
 
12412
12412
  class PageTitleComponent {
12413
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12414
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\n <i\n class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n @if (title) {\n <h1\n class=\"text-title-1 mb-0 py-1 text-truncate\"\n title=\"{{title}}\">{{title}}</h1>\n }\n @if (subTitle && !subTitleUrl) {\n <p\n class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n }\n @if (subTitle && subTitleUrl) {\n <a\n id=\"subTitle_link\"\n class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n routerLink=\"{{subTitleUrl}}\"\n target=\"_self\">\n {{subTitle}}\n </a>\n }\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
12413
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12414
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PageTitleComponent, isStandalone: false, selector: "app-page-title", inputs: { title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl" }, host: { classAttribute: "d-flex" }, ngImport: i0, template: "@if (titleIcon) {\n <i\n class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n @if (title) {\n <h1\n class=\"text-title-1 mb-0 py-1 text-truncate\"\n title=\"{{title}}\">{{title}}</h1>\n }\n @if (subTitle && !subTitleUrl) {\n <p\n class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n }\n @if (subTitle && subTitleUrl) {\n <a\n id=\"subTitle_link\"\n class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n routerLink=\"{{subTitleUrl}}\"\n target=\"_self\">\n {{subTitle}}\n </a>\n }\n</div>", dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
12415
12415
  }
12416
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, decorators: [{
12416
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageTitleComponent, decorators: [{
12417
12417
  type: Component,
12418
12418
  args: [{ selector: 'app-page-title', host: {
12419
12419
  class: 'd-flex'
12420
- }, standalone: false, template: "@if (titleIcon) {\n <i\n class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n @if (title) {\n <h1\n class=\"text-title-1 mb-0 py-1 text-truncate\"\n title=\"{{title}}\">{{title}}</h1>\n }\n @if (subTitle && !subTitleUrl) {\n <p\n class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n }\n @if (subTitle && subTitleUrl) {\n <a\n id=\"subTitle_link\"\n class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n routerLink=\"{{subTitleUrl}}\"\n target=\"_self\">\n {{subTitle}}\n </a>\n }\n</div>" }]
12420
+ }, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (titleIcon) {\n <i\n class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"\n aria-hidden=\"true\"></i>\n}\n<div class=\"text-truncate\">\n @if (title) {\n <h1\n class=\"text-title-1 mb-0 py-1 text-truncate\"\n title=\"{{title}}\">{{title}}</h1>\n }\n @if (subTitle && !subTitleUrl) {\n <p\n class=\"text-caption-1 mb-0 mt-n1 text-truncate\">{{subTitle}}</p>\n }\n @if (subTitle && subTitleUrl) {\n <a\n id=\"subTitle_link\"\n class=\"d-block text-truncate mb-0 mt-n1 font-size-small\"\n routerLink=\"{{subTitleUrl}}\"\n target=\"_self\">\n {{subTitle}}\n </a>\n }\n</div>" }]
12421
12421
  }], propDecorators: { title: [{
12422
12422
  type: Input
12423
12423
  }], titleIcon: [{
@@ -12493,14 +12493,14 @@ class PageViewComponent {
12493
12493
  closeDialog() {
12494
12494
  this.dialogService.closeLatestDialog(new DialogResult(false));
12495
12495
  }
12496
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
12497
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
12496
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
12497
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
12498
12498
  }
12499
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageViewComponent, decorators: [{
12499
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageViewComponent, decorators: [{
12500
12500
  type: Component,
12501
12501
  args: [{ selector: 'ec-page-view', host: {
12502
12502
  class: "flex-grow"
12503
- }, standalone: false, template: "<div ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
12503
+ }, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div ecOverlay\n [status]=\"$safeNavigationMigration(status?.status)\"\n [message]=\"$safeNavigationMigration(status?.message)\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
12504
12504
  }], ctorParameters: () => [{ type: DialogService }], propDecorators: { isDialog: [{
12505
12505
  type: Input
12506
12506
  }], readonly: [{
@@ -12699,10 +12699,10 @@ class RouterHelper {
12699
12699
  throw error;
12700
12700
  }
12701
12701
  }
12702
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RouterHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
12703
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RouterHelper, providedIn: 'root' }); }
12702
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RouterHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
12703
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RouterHelper, providedIn: 'root' }); }
12704
12704
  }
12705
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RouterHelper, decorators: [{
12705
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RouterHelper, decorators: [{
12706
12706
  type: Injectable,
12707
12707
  args: [{
12708
12708
  providedIn: 'root'
@@ -12735,10 +12735,10 @@ class MockDialog {
12735
12735
  close(result) {
12736
12736
  this.closed.emit(result);
12737
12737
  }
12738
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
12739
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MockDialog, isStandalone: true, inputs: { size: "size" }, outputs: { opened: "opened", closed: "closed" }, ngImport: i0 }); }
12738
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
12739
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MockDialog, isStandalone: true, inputs: { size: "size" }, outputs: { opened: "opened", closed: "closed" }, ngImport: i0 }); }
12740
12740
  }
12741
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockDialog, decorators: [{
12741
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockDialog, decorators: [{
12742
12742
  type: Directive
12743
12743
  }], propDecorators: { size: [{
12744
12744
  type: Input
@@ -12768,10 +12768,10 @@ class MockDateDisplayPipe {
12768
12768
  transform(value) {
12769
12769
  return '01/01/2017';
12770
12770
  }
12771
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockDateDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
12772
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: MockDateDisplayPipe, isStandalone: false, name: "dateDisplay" }); }
12771
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockDateDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
12772
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: MockDateDisplayPipe, isStandalone: false, name: "dateDisplay" }); }
12773
12773
  }
12774
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockDateDisplayPipe, decorators: [{
12774
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockDateDisplayPipe, decorators: [{
12775
12775
  type: Pipe,
12776
12776
  args: [{
12777
12777
  name: 'dateDisplay',
@@ -12832,10 +12832,10 @@ class MockActivatedRoute {
12832
12832
  this.queryParamMap = new Subject();
12833
12833
  this.routeConfig = {};
12834
12834
  }
12835
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockActivatedRoute, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
12836
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockActivatedRoute }); }
12835
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockActivatedRoute, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
12836
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockActivatedRoute }); }
12837
12837
  }
12838
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MockActivatedRoute, decorators: [{
12838
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MockActivatedRoute, decorators: [{
12839
12839
  type: Injectable
12840
12840
  }] });
12841
12841
  /** Return a @see RouterHelper spy object that can be used as a mock in tests */
@@ -12880,12 +12880,12 @@ class WizardButtonsComponent {
12880
12880
  onNextTab() {
12881
12881
  this.nextTab.emit();
12882
12882
  }
12883
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12884
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
12883
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12884
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
12885
12885
  }
12886
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardButtonsComponent, decorators: [{
12886
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardButtonsComponent, decorators: [{
12887
12887
  type: Component,
12888
- args: [{ selector: 'ec-wizard-buttons', standalone: false, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"] }]
12888
+ args: [{ selector: 'ec-wizard-buttons', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"] }]
12889
12889
  }], ctorParameters: () => [], propDecorators: { nextLabel: [{
12890
12890
  type: Input
12891
12891
  }], backLabel: [{
@@ -12920,12 +12920,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
12920
12920
 
12921
12921
  class WizardProgressComponent {
12922
12922
  constructor() { }
12923
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12924
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: WizardProgressComponent, isStandalone: false, selector: "ec-wizard-progress", inputs: { tabGroup: "tabGroup", currentTab: "currentTab" }, ngImport: i0, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n <div\n class=\"progress-tab\"\n [class.ml-2]=\"!isFirst\"\n [class.is-active]=\"currentTab?.id === tab.id\">\n @if (tab.completed) {\n <i\n class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n }\n @if (!tab.completed) {\n <span>{{index+1}}.&nbsp;</span>\n }\n <span>{{tab.label | translate}}</span>\n @if (!isLast) {\n <i\n class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n }\n </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
12923
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
12924
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: WizardProgressComponent, isStandalone: false, selector: "ec-wizard-progress", inputs: { tabGroup: "tabGroup", currentTab: "currentTab" }, ngImport: i0, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n <div\n class=\"progress-tab\"\n [class.ml-2]=\"!isFirst\"\n [class.is-active]=\"currentTab?.id === tab.id\">\n @if (tab.completed) {\n <i\n class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n }\n @if (!tab.completed) {\n <span>{{index+1}}.&nbsp;</span>\n }\n <span>{{tab.label | translate}}</span>\n @if (!isLast) {\n <i\n class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n }\n </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
12925
12925
  }
12926
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardProgressComponent, decorators: [{
12926
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardProgressComponent, decorators: [{
12927
12927
  type: Component,
12928
- args: [{ selector: 'ec-wizard-progress', standalone: false, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n <div\n class=\"progress-tab\"\n [class.ml-2]=\"!isFirst\"\n [class.is-active]=\"currentTab?.id === tab.id\">\n @if (tab.completed) {\n <i\n class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n }\n @if (!tab.completed) {\n <span>{{index+1}}.&nbsp;</span>\n }\n <span>{{tab.label | translate}}</span>\n @if (!isLast) {\n <i\n class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n }\n </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"] }]
12928
+ args: [{ selector: 'ec-wizard-progress', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@for (tab of tabGroup?.items; track tab; let index = $index; let isFirst = $first; let isLast = $last) {\n <div\n class=\"progress-tab\"\n [class.ml-2]=\"!isFirst\"\n [class.is-active]=\"currentTab?.id === tab.id\">\n @if (tab.completed) {\n <i\n class=\"ec-icon icon-check-circle mr-1 font-color-success\"></i>\n }\n @if (!tab.completed) {\n <span>{{index+1}}.&nbsp;</span>\n }\n <span>{{tab.label | translate}}</span>\n @if (!isLast) {\n <i\n class=\"ec-icon icon-angle-down rotate-270 ml-2\"></i>\n }\n </div>\n}", styles: [":host{display:flex;align-items:center;padding:0 1rem}.progress-tab{display:flex;align-items:center}.progress-tab.is-active{font-weight:700}\n"] }]
12929
12929
  }], ctorParameters: () => [], propDecorators: { tabGroup: [{
12930
12930
  type: Input
12931
12931
  }], currentTab: [{
@@ -12946,8 +12946,8 @@ class ComponentsModule {
12946
12946
  ]
12947
12947
  };
12948
12948
  }
12949
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
12950
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, declarations: [ButtonComponent,
12949
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
12950
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ComponentsModule, declarations: [ButtonComponent,
12951
12951
  TabsComponent,
12952
12952
  TextboxComponent,
12953
12953
  NavItemActiveDirective,
@@ -13094,7 +13094,7 @@ class ComponentsModule {
13094
13094
  KeyboardNavContainerDirective,
13095
13095
  DateDisplayPipe2,
13096
13096
  DateDisplayPipe3] }); }
13097
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, providers: [
13097
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComponentsModule, providers: [
13098
13098
  FormGroupHelper,
13099
13099
  DialogService,
13100
13100
  DateDisplayPipe,
@@ -13114,7 +13114,7 @@ class ComponentsModule {
13114
13114
  OverlayModule,
13115
13115
  ScrollingModule] }); }
13116
13116
  }
13117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, decorators: [{
13117
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ComponentsModule, decorators: [{
13118
13118
  type: NgModule,
13119
13119
  args: [{
13120
13120
  declarations: [
@@ -13813,10 +13813,10 @@ class PageBaseComponent {
13813
13813
  this.previousUrl = url;
13814
13814
  this.onNavigationEnd();
13815
13815
  }
13816
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
13817
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: PageBaseComponent, isStandalone: true, host: { properties: { "class": "this.classList" } }, ngImport: i0 }); }
13816
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
13817
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: PageBaseComponent, isStandalone: true, host: { properties: { "class": "this.classList" } }, ngImport: i0 }); }
13818
13818
  }
13819
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageBaseComponent, decorators: [{
13819
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageBaseComponent, decorators: [{
13820
13820
  type: Directive
13821
13821
  }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { classList: [{
13822
13822
  type: HostBinding,
@@ -14263,10 +14263,10 @@ class WizardBaseComponent extends PageBaseComponent {
14263
14263
  this.help = tab ? tab.help : undefined;
14264
14264
  this.title = tab ? tab.title : undefined;
14265
14265
  }
14266
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
14267
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: WizardBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
14266
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardBaseComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
14267
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: WizardBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
14268
14268
  }
14269
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardBaseComponent, decorators: [{
14269
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: WizardBaseComponent, decorators: [{
14270
14270
  type: Directive
14271
14271
  }], ctorParameters: () => [{ type: i0.Injector }] });
14272
14272