@energycap/components 0.46.14-highlighting-normalized-pattern.20260702-1533 → 0.46.15

package/fesm2022/energycap-components.mjs

@@ -368,11 +368,11 @@ class BannerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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}}\"></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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            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}}\"></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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: CacheService }], propDecorators: { hidden: [{
                 type: HostBinding,
                 args: ['hidden']
@@ -2325,11 +2325,11 @@ class TooltipComponent {
         this.overlayRef?.dispose();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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}}\" 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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ec-tooltip', standalone: false, template: "<article id=\"{{id}}\" 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"] }]
+            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"] }]
         }], propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.--ec-tooltip-background-color']
@@ -4274,11 +4274,11 @@ class ViewOverlayComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, decorators: [{
             type: Component,
-            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\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"] }]
+            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"] }]
         }], propDecorators: { status: [{
                 type: Input
             }], message: [{
@@ -10028,11 +10028,11 @@ class SelectComponent extends FormControlBase {
         }
     }
     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 }); }
-    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\"></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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            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\"></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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }], propDecorators: { placeholder: [{
                 type: Input
             }], options: [{
@@ -10267,6 +10267,8 @@ class ConfirmComponent {
         this.formGroup = new UntypedFormGroup({});
         this.status = new Overlay('hasData');
         this.showTextBox = false;
+        /** Result of the inline confirm action, used for the screen-reader status text in the result template */
+        this.inlineResultSuccess = false;
         this.destroyed = new Subject();
         this.onDialogSave = new EventEmitter();
         this.onDialogCancel = new EventEmitter();
@@ -10345,6 +10347,7 @@ class ConfirmComponent {
     async doInlineConfirmAction() {
         this.status.setStatus('pending', this.context.inlineConfirmPendingMessage);
         let result = await this.context.inlineConfirmAction();
+        this.inlineResultSuccess = result.isSuccess;
         this.status.setStatus('noData', result.message, {
             id: 'inlineConfirmClose',
             label: 'Close',
@@ -10354,11 +10357,11 @@ class ConfirmComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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\"></i>\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}\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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            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\"></i>\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}\n"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { context: [{
                 type: Input
             }], onDialogSave: [{
@@ -11553,6 +11556,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 args: ['timedToast', { static: false, read: ElementRef }]
             }] } });
 
+/** Module-level counter so each tooltip instance gets a unique DOM id, keeping
+ * aria-describedby unambiguous when more than one tooltip is in the DOM (e.g. during
+ * the hide delay or across multiple anchors). */
+let uniqueTooltipId = 0;
 class TooltipDirective {
     constructor(tooltipService, element, renderer2) {
         this.tooltipService = tooltipService;
@@ -11581,6 +11588,10 @@ class TooltipDirective {
          * if we never showed the tooltip this will remain null and we won't have an event to unsubscribe to
          */
         this.mouseMoveUnsubscribe = null;
+        /**Set when we show a tooltip so Escape can dismiss it without moving the pointer (WCAG 1.4.13).
+         * Unsubscribed when hide fires, like mouseMoveUnsubscribe.
+         */
+        this.keydownUnsubscribe = null;
     }
     ngOnInit() {
         //checkInputsValue(): if there is an error it will prevent to execute
@@ -11607,6 +11618,10 @@ class TooltipDirective {
     onMouseMove(event) {
         let callCallback = false;
         if (this.contentRect) {
+            //Keep the tooltip visible while the pointer is over the tooltip content itself (WCAG 1.4.13)
+            if (this.isPointerOverTooltip(event)) {
+                return;
+            }
             callCallback = this.tooltipService.onMove(event, this.contentRect);
             if (callCallback) {
                 //trigger on hide process
@@ -11622,9 +11637,39 @@ class TooltipDirective {
     }
     //Trigger the process to hide and later the process
     //to mark as complete the cycle of show and hide the tooltip
-    onLeave() {
+    onLeave(event) {
+        //Moving from the anchor onto the tooltip content should not hide it (WCAG 1.4.13).
+        //The document mousemove backstop hides it once the pointer leaves both.
+        const overlayElement = this.tooltip?.overlayRef?.overlayElement;
+        if (overlayElement && event?.relatedTarget && overlayElement.contains(event.relatedTarget)) {
+            return;
+        }
         this.interrupt.next();
     }
+    //Show the tooltip for keyboard users when the anchor receives focus (WCAG 2.1.1)
+    onFocusIn() {
+        this.mouseOver.next();
+    }
+    //Hide the tooltip when keyboard focus leaves the anchor
+    onFocusOut() {
+        this.interrupt.next();
+    }
+    //Dismiss the tooltip on Escape without moving pointer or focus (WCAG 1.4.13)
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.interrupt.next();
+        }
+    }
+    //True when the pointer coordinates are within the tooltip overlay element
+    isPointerOverTooltip(event) {
+        const overlayElement = this.tooltip?.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return false;
+        }
+        const rect = overlayElement.getBoundingClientRect();
+        return event.clientX >= rect.left && event.clientX <= rect.right
+            && event.clientY >= rect.top && event.clientY <= rect.bottom;
+    }
     checkInputsValue() {
         let parametersWithValue = 0;
         if (this.tooltipText) {
@@ -11651,7 +11696,7 @@ class TooltipDirective {
      */
     createTooltipOptions() {
         this.tooltipOptions = {
-            id: `tooltip_${this.tooltipConfig?.id ? this.tooltipConfig?.id : ''}`,
+            id: `tooltip_${this.tooltipConfig?.id ? this.tooltipConfig.id : ++uniqueTooltipId}`,
             text: this.tooltipConfig?.text || this.tooltipText,
             title: this.tooltipConfig?.title,
             subtitle: this.tooltipConfig?.subtitle,
@@ -11672,6 +11717,11 @@ class TooltipDirective {
         if (!this.tooltip) {
             this.tooltip = this.tooltipService.show(element, this.tooltipPosition, this.tooltipOptions);
             this.mouseMoveUnsubscribe = this.renderer2.listen(document, 'mousemove', this.onMouseMove.bind(this));
+            this.keydownUnsubscribe = this.renderer2.listen(document, 'keydown', this.onKeydown.bind(this));
+            //Associate the tooltip content with its anchor so screen readers announce it (WCAG 4.1.2)
+            if (this.tooltipOptions?.id) {
+                this.renderer2.setAttribute(element, 'aria-describedby', this.tooltipOptions.id);
+            }
         }
     }
     hide() {
@@ -11685,6 +11735,11 @@ class TooltipDirective {
             if (this.mouseMoveUnsubscribe) {
                 this.mouseMoveUnsubscribe();
             }
+            if (this.keydownUnsubscribe) {
+                this.keydownUnsubscribe();
+                this.keydownUnsubscribe = null;
+            }
+            this.renderer2.removeAttribute(this.element.nativeElement, 'aria-describedby');
         }
         //Interrupt the flow of mouseover with a delay and triggers the 
         //flow to hide the tooltip with a delay 
@@ -11698,7 +11753,7 @@ class TooltipDirective {
         this.interrupt.next();
     }
     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 }); }
-    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()" } }, ngImport: i0 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -11719,7 +11774,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 args: ['mouseover']
             }], onLeave: [{
                 type: HostListener,
-                args: ['mouseleave']
+                args: ['mouseleave', ['$event']]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
 class TreeComponent {
@@ -12123,13 +12184,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 class PageTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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}}\"></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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-page-title', host: {
                         class: 'd-flex'
-                    }, standalone: false, template: "@if (titleIcon) {\n  <i\n  class=\"flex-shrink mr-1 my-1 ec-icon ec-icon-md {{titleIcon}}\"></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>" }]
+                    }, 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>" }]
         }], propDecorators: { title: [{
                 type: Input
             }], titleIcon: [{