@energycap/components 0.42.4-esbuild.20250131-1510 → 0.43.1-ECAP-28460-autofocus-issue.20250221-1452

package/esm2022/lib/controls/link-button/link-button.component.mjs

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class LinkButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LinkButtonComponent, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkButtonComponent, selector: "button[ecLinkButton]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[ecLinkButton]', template: `<ng-content></ng-content>`, styles: [":host{display:inline;border:none;padding:0;background-color:transparent;font-size:inherit;text-align:start;color:var(--ec-color-link);cursor:pointer}:host:hover{text-decoration:underline}:host:focus{outline:none;text-decoration:underline}:host(:disabled){cursor:default;color:var(--ec-color-hint-dark)}:host(:disabled):hover{text-decoration:none}\n"] }]
         }] });

package/esm2022/lib/controls/menu/menu.component.mjs

@@ -426,10 +426,10 @@ export class MenuComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.WindowService }, { token: i2.ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\r\n        [attr.disabled]=\"item.disabled\"\r\n        [hidden]=\"item.hidden\"\r\n        ecNavItemActive=\"is-selected\"\r\n        [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n        [ecNavItemActiveUrl]=\"item.url\"\r\n        [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n        (routerLinkActivated)=\"selectItem($event, item)\"\r\n        [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n        (click)=\"selectItem($event, item)\">\r\n\r\n        <a *ngIf=\"item.url && !item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams || null\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <a *ngIf=\"item.url && item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           href=\"{{item.url}}\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <div *ngIf=\"!item.url\"\r\n             title=\"{{truncateItems ? item.label : ''}}\"\r\n             class=\"item-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </div>\r\n    </li>\r\n</ng-template>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: i6.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.WindowService }, { token: i2.ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\r\n        [attr.disabled]=\"item.disabled\"\r\n        [hidden]=\"item.hidden\"\r\n        ecNavItemActive=\"is-selected\"\r\n        [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n        [ecNavItemActiveUrl]=\"item.url\"\r\n        [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n        (routerLinkActivated)=\"selectItem($event, item)\"\r\n        [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n        (click)=\"selectItem($event, item)\">\r\n\r\n        <a *ngIf=\"item.url && !item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams || null\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <a *ngIf=\"item.url && item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           href=\"{{item.url}}\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <div *ngIf=\"!item.url\"\r\n             title=\"{{truncateItems ? item.label : ''}}\"\r\n             class=\"item-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </div>\r\n    </li>\r\n</ng-template>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: i6.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-menu', template: "<nav>\r\n    <div class=\"parent\"\r\n         [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n        <header id=\"{{id}}_header\"\r\n                class=\"text-heading-3 p-1\"\r\n                [class.is-selected]=\"highlightedItemIndex === -1\"\r\n                *ngIf=\"parent\"\r\n                (click)=\"back($event)\">\r\n            <div class=\"item-wrapper\">\r\n                <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n                <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n            </div>\r\n        </header>\r\n\r\n        <ul id=\"{{id}}_list\"\r\n            class=\"py-1\">\r\n            <ng-container *ngFor=\"let item of items; index as i\">\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\r\n\r\n                <!-- Show child items under parent item if the item is a heading or divided-section -->\r\n                <ng-container\r\n                              *ngIf=\"item.items?.length && (item.display === 'heading' || item.display === 'divided-section')\">\r\n                    <ng-container *ngFor=\"let childItem of item.items; index as j; first as isFirst; last as isLast\"\r\n                                  [ngTemplateOutlet]=\"itemTemplate\"\r\n                                  [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: item.display === 'divided-section', isFirst: isFirst, isLast: isLast}\">\r\n                    </ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </ul>\r\n\r\n        <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n    </div>\r\n\r\n    <!-- Child menu (Rendered to the right) -->\r\n    <ec-menu *ngIf=\"selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section'\"\r\n             id=\"{{id}}_child\"\r\n             class=\"child\"\r\n             [parent]=\"selected\"\r\n             [items]=\"selected?.items\"\r\n             [showNoItems]=\"true\"\r\n             [templateType]=\"templateType\"\r\n             [enableKeyNav]=\"true\"\r\n             [truncateItems]=\"truncateItems\"\r\n             (selectedChanged)=\"onSelection($event)\"\r\n             (menuClosed)=\"toggleChildMenu(false)\">\r\n    </ec-menu>\r\n</nav>\r\n\r\n<ng-template #itemTemplate\r\n             let-item\r\n             let-i=\"index\"\r\n             let-isDividedSectionChild=\"isDividedSectionChild\"\r\n             let-isFirst=\"isFirst\"\r\n             let-isLast=\"isLast\">\r\n    <li *ngIf=\"!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section'\"\r\n        id=\"{{item.id || id + '_item' + i}}\"\r\n        class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n        [class.divider-top]=\"item.display === 'divider-top' || (isDividedSectionChild && isFirst)\"\r\n        [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\r\n        [attr.disabled]=\"item.disabled\"\r\n        [hidden]=\"item.hidden\"\r\n        ecNavItemActive=\"is-selected\"\r\n        [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n        [ecNavItemActiveUrl]=\"item.url\"\r\n        [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n        (routerLinkActivated)=\"selectItem($event, item)\"\r\n        [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n        (click)=\"selectItem($event, item)\">\r\n\r\n        <a *ngIf=\"item.url && !item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           [routerLink]=\"item.url\"\r\n           [queryParams]=\"item.queryParams || null\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <a *ngIf=\"item.url && item.externalLink\"\r\n           id=\"{{item.id}}_link\"\r\n           title=\"{{truncateItems ? item.label : ''}}\"\r\n           class=\"item-wrapper\"\r\n           href=\"{{item.url}}\"\r\n           target=\"{{item.target || '_self'}}\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </a>\r\n\r\n        <div *ngIf=\"!item.url\"\r\n             title=\"{{truncateItems ? item.label : ''}}\"\r\n             class=\"item-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n        </div>\r\n    </li>\r\n</ng-template>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n             let-item>\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n             let-item>\r\n\r\n    <i class=\"ec-icon icon-check ec-icon-sm\"\r\n       *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n    <i class=\"ec-icon {{item.icon}} ml-2\"\r\n       *ngIf=\"item.icon\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n             let-item>\r\n    <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n    <span id=\"{{item.id}}_label\"\r\n          class=\"label\"\r\n          [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </span>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n             let-item>\r\n    <i class=\"ec-icon {{item.icon}}\"\r\n       *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n    <div *ngIf=\"item.display !== 'heading'\"\r\n         class=\"label flex-grow\">\r\n        <div id=\"{{item.id}}_label\"\r\n             class=\"text-body-1\"\r\n             [class.text-truncate]=\"truncateItems\">\r\n            {{item.label}}\r\n            <ng-container *ngIf=\"item.helpPopover\"\r\n                          [ngTemplateOutlet]=\"helpPopover\"\r\n                          [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n            </ng-container>\r\n        </div>\r\n        <div id=\"{{item.id}}_caption\"\r\n             *ngIf=\"item.caption\"\r\n             class=\"text-caption-1\"\r\n             [class.text-truncate]=\"truncateItems\"\r\n             [innerHTML]=\"item.caption\"></div>\r\n    </div>\r\n    <h3 *ngIf=\"item.display === 'heading'\"\r\n        class=\"flex-grow text-heading-3 align-self-center\"\r\n        [class.text-truncate]=\"truncateItems\">\r\n        {{item.label}}\r\n        <ng-container *ngIf=\"item.helpPopover\"\r\n                      [ngTemplateOutlet]=\"helpPopover\"\r\n                      [ngTemplateOutletContext]=\"{$implicit: item}\">\r\n        </ng-container>\r\n    </h3>\r\n\r\n    <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n       *ngIf=\"item?.items && item.display !== 'heading' && item.display !== 'divided-section'\"></i>\r\n</ng-template>\r\n\r\n<ng-template #helpPopover\r\n             let-item>\r\n    <ec-help-popover id=\"{{item.id}}_helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{item.helpPopover | translate}}\"\r\n                     contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\r\n    </ec-help-popover>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.WindowService }, { type: i2.ScrollService }], propDecorators: { id: [{

package/esm2022/lib/controls/navigation/nav-item-active.directive.mjs

@@ -66,10 +66,10 @@ export class NavItemActiveDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavItemActiveDirective, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: { classValue: ["ecNavItemActive", "classValue"], exact: ["ecNavItemActiveExactMatch", "exact"], queryParams: ["ecNavItemActiveQueryParams", "queryParams"], url: ["ecNavItemActiveUrl", "url"] }, outputs: { routerLinkActivated: "routerLinkActivated" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavItemActiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavItemActiveDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ecNavItemActive]'

package/esm2022/lib/controls/numericbox/numericbox.component.mjs

@@ -338,10 +338,10 @@ export class NumericboxComponent extends FormControlBase {
         this.renderer.setProperty(unitsEl, 'innerHTML', text);
         return unitsEl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumericboxComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n\r\n       <label *ngIf=\"label\">\r\n              <span>{{label | translate}}</span>\r\n              <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                               *ngIf=\"helpPopover\"\r\n                               class=\"d-inline-block my-n3 mx-n1\"\r\n                               text=\"{{helpPopover | translate}}\"\r\n                               contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n       </label>\r\n\r\n       <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n       <ec-textbox [id]=\"id\"\r\n                   #textbox\r\n                   class=\"control-input mb-0\"\r\n                   [placeholder]=\"placeholder\"\r\n                   [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n                   [autofocus]=\"autofocus\"\r\n                   [formModel]=\"textboxFormModel\"\r\n                   [required]=\"required\"\r\n                   [tabindex]=\"tabindex\"\r\n                   [readonly]=\"readonly\"\r\n                   [tooltip]=\"tooltip\"\r\n                   (focusout)=\"onFocusOut()\">\r\n       </ec-textbox>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumericboxComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n\r\n       <label *ngIf=\"label\">\r\n              <span>{{label | translate}}</span>\r\n              <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                               *ngIf=\"helpPopover\"\r\n                               class=\"d-inline-block my-n3 mx-n1\"\r\n                               text=\"{{helpPopover | translate}}\"\r\n                               contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n       </label>\r\n\r\n       <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n       <ec-textbox [id]=\"id\"\r\n                   #textbox\r\n                   class=\"control-input mb-0\"\r\n                   [placeholder]=\"placeholder\"\r\n                   [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n                   [autofocus]=\"autofocus\"\r\n                   [formModel]=\"textboxFormModel\"\r\n                   [required]=\"required\"\r\n                   [tabindex]=\"tabindex\"\r\n                   [readonly]=\"readonly\"\r\n                   [tooltip]=\"tooltip\"\r\n                   (focusout)=\"onFocusOut()\">\r\n       </ec-textbox>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumericboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumericboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-numericbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n     [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n\r\n       <label *ngIf=\"label\">\r\n              <span>{{label | translate}}</span>\r\n              <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n              <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                               *ngIf=\"helpPopover\"\r\n                               class=\"d-inline-block my-n3 mx-n1\"\r\n                               text=\"{{helpPopover | translate}}\"\r\n                               contentPosition=\"{{helpPopoverPosition}}\">\r\n              </ec-help-popover>\r\n       </label>\r\n\r\n       <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n         for javascript to support.  If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n         decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n         as we would push them past the limit -->\r\n       <ec-textbox [id]=\"id\"\r\n                   #textbox\r\n                   class=\"control-input mb-0\"\r\n                   [placeholder]=\"placeholder\"\r\n                   [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n                   [autofocus]=\"autofocus\"\r\n                   [formModel]=\"textboxFormModel\"\r\n                   [required]=\"required\"\r\n                   [tabindex]=\"tabindex\"\r\n                   [readonly]=\"readonly\"\r\n                   [tooltip]=\"tooltip\"\r\n                   (focusout)=\"onFocusOut()\">\r\n       </ec-textbox>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-form-control-color-disabled);opacity:.65}ec-textbox ::ng-deep .units{display:block;position:absolute;top:0;height:2rem;line-height:1.25rem;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}.control.invalid ec-textbox ::ng-deep input.ng-invalid:focus,.control.invalid ec-textbox ::ng-deep input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.icon-required,.control.invalid ec-textbox ::ng-deep input.ng-valid~.icon-required{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{

package/esm2022/lib/controls/popover/popover.component.mjs

@@ -88,10 +88,10 @@ export class PopoverComponent {
         const overlayY = position[0];
         return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2.TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopoverComponent, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  <ec-tags *ngIf=\"tag\"\r\n            [isCondensed] = \"true\"\r\n            [tags]=\"tag\">\r\n  </ec-tags>\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    <ec-tags *ngIf=\"tag\"\r\n             [isCondensed]=\"true\"\r\n             [tags]=\"hoverTag\">\r\n    </ec-tags>\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed"], outputs: ["tagClosed"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2.TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PopoverComponent, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  <ec-tags *ngIf=\"tag\"\r\n            [isCondensed] = \"true\"\r\n            [tags]=\"tag\">\r\n  </ec-tags>\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    <ec-tags *ngIf=\"tag\"\r\n             [isCondensed]=\"true\"\r\n             [tags]=\"hoverTag\">\r\n    </ec-tags>\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed"], outputs: ["tagClosed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-popover', template: "<!-- Before hover state -->\r\n<div class=\"p-2\">\r\n  <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n  <ec-tags *ngIf=\"tag\"\r\n            [isCondensed] = \"true\"\r\n            [tags]=\"tag\">\r\n  </ec-tags>\r\n</div>\r\n<!-- ./Before hover state -->\r\n\r\n<!-- Hover state -->\r\n<ng-template #content>\r\n  <article class=\"popover-content\"\r\n           (document:mousemove)=\"onMouseMove($event)\">\r\n    <ng-content></ng-content>\r\n  </article>\r\n  <div class=\"p-2 {{contentPosition}}\">\r\n    <i *ngIf=\"!tag\" class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n    <ec-tags *ngIf=\"tag\"\r\n             [isCondensed]=\"true\"\r\n             [tags]=\"hoverTag\">\r\n    </ec-tags>\r\n  </div>\r\n</ng-template>\r\n<!-- ./Hover state -->\r\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i2.TooltipService }], propDecorators: { icon: [{

package/esm2022/lib/controls/radio-button/radio-button.component.mjs

@@ -61,10 +61,10 @@ export class RadioButtonComponent extends FormControlBase {
             console.warn("Radio button components with a type of toggle cannot have more than 5 options");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  <label *ngIf=\"label\">\r\n    <span>{{label | translate}}</span>\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n    <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                     *ngIf=\"helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{helpPopover | translate}}\"\r\n                     contentPosition=\"{{helpPopoverPosition}}\">\r\n    </ec-help-popover>\r\n  </label>\r\n  \r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\"\r\n             *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  <label *ngIf=\"label\">\r\n    <span>{{label | translate}}</span>\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n    <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                     *ngIf=\"helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{helpPopover | translate}}\"\r\n                     contentPosition=\"{{helpPopoverPosition}}\">\r\n    </ec-help-popover>\r\n  </label>\r\n  \r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\"\r\n             *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n     [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n\r\n  <label *ngIf=\"label\">\r\n    <span>{{label | translate}}</span>\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">&nbsp;{{validationErrors | translate}}</span>\r\n    <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                     *ngIf=\"helpPopover\"\r\n                     class=\"d-inline-block my-n3 mx-n1\"\r\n                     text=\"{{helpPopover | translate}}\"\r\n                     contentPosition=\"{{helpPopoverPosition}}\">\r\n    </ec-help-popover>\r\n  </label>\r\n  \r\n  <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n       [ngClass]=\"currentClasses\"\r\n       [class.is-disabled]=\"formModel.disabled\"\r\n       [class.is-readonly]=\"readonly\">\r\n\r\n    <!-- RadioButton type=\"toggle\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'toggle'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n        <input [attr.id]=\"inputId + i.toString()\"\r\n               [formControl]=\"formModel\"\r\n               type=\"radio\"\r\n               tabindex=\"{{tabindex}}\"\r\n               [value]=\"option.value\"\r\n               #radioInput\r\n               name=\"{{name}}\"\r\n               attr.name=\"{{name}}\"\r\n               [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n        <label [attr.for]=\"inputId + i.toString()\"\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <i class=\"ec-icon {{option.icon}}\"\r\n             *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n        </label>\r\n      </ng-container>\r\n      <a>\r\n        <div class=\"toggle-handle\"></div>\r\n      </a>\r\n      <div class=\"toggle-focused\"></div>\r\n    </ng-container>\r\n\r\n    <!-- RadioButton type=\"radio\"-->\r\n    <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n    <ng-container *ngIf=\"type === 'radio'\">\r\n      <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n        <label class='radio-button'\r\n               title=\"{{ option.tooltip | translate}}\">\r\n          <!-- The input has two name attributes set, one is for the form model and one is for the broswer.  With one set\r\n                     the tabbing did not work, and with the other the controls were all linked together.  They both need set\r\n                     for the best of both worlds -->\r\n          <input [attr.id]=\"inputId + i.toString()\"\r\n                 class=\"input\"\r\n                 [formControl]=\"formModel\"\r\n                 type=\"radio\"\r\n                 value=\"{{option.value}}\"\r\n                 #radioInput\r\n                 tabindex=\"{{tabindex}}\"\r\n                 name=\"{{name}}\"\r\n                 attr.name=\"{{name}}\"\r\n                 [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n          <span class=\"indicator\"></span>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n                class=\"label\"\r\n                *ngIf=\"option.label\"\r\n                [innerHtml]=\"option.label | translate\"></span>\r\n        </label>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.control>label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-form-control-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
         }], ctorParameters: () => [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }], propDecorators: { type: [{

package/esm2022/lib/controls/select/select.component.mjs

@@ -72,10 +72,10 @@ export class SelectComponent extends FormControlBase {
             this.formModel.setValue(this.options[0]?.value, { emitEvent: !firstChange });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n     [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n\r\n        <label *ngIf=\"label\"\r\n               for=\"{{id}}_select\">\r\n                <span>{{label | translate}}</span>\r\n                <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                                 *ngIf=\"helpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{helpPopover | translate}}\"\r\n                                 contentPosition=\"{{helpPopoverPosition}}\">\r\n                </ec-help-popover>\r\n        </label>\r\n\r\n        <select [attr.id]=\"inputId\"\r\n                tabindex=\"{{tabindex}}\"\r\n                [formControl]=\"formModel\"\r\n                [attr.required]=\"required\"\r\n                [attr.cdkFocusInitial]=\"autofocus || null\">\r\n                <option *ngIf=\"!required\"\r\n                        [ngValue]=\"null\">{{placeholder}}</option>\r\n                <option *ngFor=\"let option of options\"\r\n                        [ngValue]=\"option.value\">{{option.label}}</option>\r\n        </select>\r\n        <i class=\"ec-icon icon-caret-down\"></i>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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;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 1.5rem .3125rem .5rem;height:2rem}: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~.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);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:focus{border-color:var(--ec-form-control-background-color-invalid)}: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.is-uppercase:not(.is-empty){text-transform:uppercase}: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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n     [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n\r\n        <label *ngIf=\"label\"\r\n               for=\"{{id}}_select\">\r\n                <span>{{label | translate}}</span>\r\n                <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                                 *ngIf=\"helpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{helpPopover | translate}}\"\r\n                                 contentPosition=\"{{helpPopoverPosition}}\">\r\n                </ec-help-popover>\r\n        </label>\r\n\r\n        <select [attr.id]=\"inputId\"\r\n                tabindex=\"{{tabindex}}\"\r\n                [formControl]=\"formModel\"\r\n                [attr.required]=\"required\"\r\n                [attr.cdkFocusInitial]=\"autofocus || null\">\r\n                <option *ngIf=\"!required\"\r\n                        [ngValue]=\"null\">{{placeholder}}</option>\r\n                <option *ngFor=\"let option of options\"\r\n                        [ngValue]=\"option.value\">{{option.label}}</option>\r\n        </select>\r\n        <i class=\"ec-icon icon-caret-down\"></i>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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;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 1.5rem .3125rem .5rem;height:2rem}: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~.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);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:focus{border-color:var(--ec-form-control-background-color-invalid)}: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.is-uppercase:not(.is-empty){text-transform:uppercase}: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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5.HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-select', template: "<div class=\"control\"\r\n     [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n\r\n        <label *ngIf=\"label\"\r\n               for=\"{{id}}_select\">\r\n                <span>{{label | translate}}</span>\r\n                <ec-help-popover id=\"{{id}}_helpPopover\"\r\n                                 *ngIf=\"helpPopover\"\r\n                                 class=\"d-inline-block my-n3 mx-n1\"\r\n                                 text=\"{{helpPopover | translate}}\"\r\n                                 contentPosition=\"{{helpPopoverPosition}}\">\r\n                </ec-help-popover>\r\n        </label>\r\n\r\n        <select [attr.id]=\"inputId\"\r\n                tabindex=\"{{tabindex}}\"\r\n                [formControl]=\"formModel\"\r\n                [attr.required]=\"required\"\r\n                [attr.cdkFocusInitial]=\"autofocus || null\">\r\n                <option *ngIf=\"!required\"\r\n                        [ngValue]=\"null\">{{placeholder}}</option>\r\n                <option *ngFor=\"let option of options\"\r\n                        [ngValue]=\"option.value\">{{option.label}}</option>\r\n        </select>\r\n        <i class=\"ec-icon icon-caret-down\"></i>\r\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);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: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~.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{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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;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 1.5rem .3125rem .5rem;height:2rem}: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~.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);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:focus{border-color:var(--ec-form-control-background-color-invalid)}: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.is-uppercase:not(.is-empty){text-transform:uppercase}: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: i1.ValidationMessageService }, { type: i2.FormGroupHelper }, { type: i0.ElementRef }], propDecorators: { placeholder: [{

package/esm2022/lib/controls/tabs/tabs.component.mjs

@@ -28,10 +28,10 @@ export class TabsComponent {
             this.tabs.selected = tab;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{outline:none;border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{