@energycap/components 0.31.5 → 0.32.0

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

@@ -0,0 +1,84 @@
+import { OverlayConfig } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Component, HostListener, Input, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+export class PopoverComponent {
+    constructor(overlay, viewContainerRef, elementRef) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.icon = '';
+        this.contentPosition = 'top-left';
+        this.iconHoverClass = '';
+        this.isVisible = false;
+    }
+    ngOnDestroy() {
+        this.hide();
+    }
+    show() {
+        if (!this.isVisible) {
+            const overlayConfig = this.getOverlayConfig();
+            this.overlayRef = this.overlay.create(overlayConfig);
+            const contentPortal = new TemplatePortal(this.content, this.viewContainerRef);
+            this.contentViewRef = this.overlayRef.attach(contentPortal);
+            this.isVisible = true;
+        }
+    }
+    /**
+     * Hides the popover if the mouse moves outside of the popover content
+     */
+    onMouseMove(event) {
+        if (!this.contentRect) {
+            this.contentRect = this.contentViewRef?.rootNodes[0].getBoundingClientRect();
+        }
+        if (this.contentRect) {
+            if (event.clientX > this.contentRect.right
+                || event.clientX < this.contentRect.left
+                || event.clientY > this.contentRect.bottom
+                || event.clientY < this.contentRect.top) {
+                this.hide();
+            }
+        }
+    }
+    hide() {
+        this.contentRect = undefined;
+        this.overlayRef?.dispose();
+        this.isVisible = false;
+    }
+    getOverlayConfig() {
+        const position = this.getPosition();
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions([position]);
+        const config = new OverlayConfig({
+            positionStrategy: positionStrategy
+        });
+        return config;
+    }
+    getPosition() {
+        const position = this.contentPosition.split('-');
+        const overlayX = (position[1] == 'left' ? 'start' : 'end');
+        const overlayY = position[0];
+        return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
+    }
+}
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: PopoverComponent, selector: "ec-popover", inputs: { icon: "icon", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "show()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"p-2\">\r\n  <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n</div>\r\n\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 class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n  </div>\r\n</ng-template>\r\n", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{line-height:1;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:1}.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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ec-popover', template: "<div class=\"p-2\">\r\n  <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\r\n</div>\r\n\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 class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\r\n  </div>\r\n</ng-template>\r\n", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{line-height:1;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:1}.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: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }]; }, propDecorators: { icon: [{
+                type: Input
+            }], contentPosition: [{
+                type: Input
+            }], iconHoverClass: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: ['content']
+            }], show: [{
+                type: HostListener,
+                args: ['mouseover']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvcG9wb3Zlci9wb3BvdmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9wb3BvdmVyL3BvcG92ZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUE4QixhQUFhLEVBQWMsTUFBTSxzQkFBc0IsQ0FBQztBQUM3RixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDckQsT0FBTyxFQUFFLFNBQVMsRUFBK0IsWUFBWSxFQUFFLEtBQUssRUFBMEIsU0FBUyxFQUFvQixNQUFNLGVBQWUsQ0FBQzs7O0FBU2pKLE1BQU0sT0FBTyxnQkFBZ0I7SUFlM0IsWUFDVSxPQUFnQixFQUNoQixnQkFBa0MsRUFDbEMsVUFBc0I7UUFGdEIsWUFBTyxHQUFQLE9BQU8sQ0FBUztRQUNoQixxQkFBZ0IsR0FBaEIsZ0JBQWdCLENBQWtCO1FBQ2xDLGVBQVUsR0FBVixVQUFVLENBQVk7UUFoQnZCLFNBQUksR0FBVyxFQUFFLENBQUM7UUFFbEIsb0JBQWUsR0FBMkIsVUFBVSxDQUFDO1FBRXJELG1CQUFjLEdBQVcsRUFBRSxDQUFDO1FBTzdCLGNBQVMsR0FBWSxLQUFLLENBQUM7SUFNL0IsQ0FBQztJQUVMLFdBQVc7UUFDVCxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDZCxDQUFDO0lBR00sSUFBSTtRQUNULElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ25CLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO1lBQzlDLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7WUFFckQsTUFBTSxhQUFhLEdBQUcsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztZQUM5RSxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBRTVELElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQztJQUVEOztPQUVHO0lBQ0ksV0FBVyxDQUFDLEtBQWlCO1FBQ2xDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLGNBQWMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMscUJBQXFCLEVBQUUsQ0FBQztTQUM5RTtRQUVELElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNwQixJQUNJLEtBQUssQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLO21CQUN0QyxLQUFLLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSTttQkFDckMsS0FBSyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU07bUJBQ3ZDLEtBQUssQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLEVBQ3RDO2dCQUNBLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUNiO1NBQ0Y7SUFDSCxDQUFDO0lBRU8sSUFBSTtRQUNWLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLEVBQUUsT0FBTyxFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQztJQUVPLGdCQUFnQjtRQUN0QixNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFFcEMsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsRUFBRTthQUM3QyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO2FBQ3BDLGFBQWEsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7UUFFN0IsTUFBTSxNQUFNLEdBQUcsSUFBSSxhQUFhLENBQUM7WUFDL0IsZ0JBQWdCLEVBQUUsZ0JBQWdCO1NBQ25DLENBQUMsQ0FBQztRQUVILE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFTyxXQUFXO1FBQ2pCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ2pELE1BQU0sUUFBUSxHQUFvQixDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUUsTUFBTSxRQUFRLEdBQXFCLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUMvQyxPQUFPLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUFDO0lBQzFGLENBQUM7OzZHQW5GVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQixzU0NYN0IsNFpBYUE7MkZERmEsZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNFLFlBQVk7c0pBTWIsSUFBSTtzQkFBWixLQUFLO2dCQUVHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBRUcsY0FBYztzQkFBdEIsS0FBSztnQkFFdUIsT0FBTztzQkFBbkMsU0FBUzt1QkFBQyxTQUFTO2dCQWtCYixJQUFJO3NCQURWLFlBQVk7dUJBQUMsV0FBVyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbm5lY3RlZFBvc2l0aW9uLCBPdmVybGF5LCBPdmVybGF5Q29uZmlnLCBPdmVybGF5UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xyXG5pbXBvcnQgeyBUZW1wbGF0ZVBvcnRhbCB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9wb3J0YWwnO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEVtYmVkZGVkVmlld1JlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBUZW1wbGF0ZVJlZiwgVmlld0NoaWxkLCBWaWV3Q29udGFpbmVyUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5leHBvcnQgdHlwZSBQb3BvdmVyQ29udGVudFBvc2l0aW9uID0gJ3RvcC1sZWZ0JyB8ICd0b3AtcmlnaHQnIHwgJ2JvdHRvbS1yaWdodCcgfCAnYm90dG9tLWxlZnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdlYy1wb3BvdmVyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcG9wb3Zlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcG9wb3Zlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuXHJcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJyc7XHJcblxyXG4gIEBJbnB1dCgpIGNvbnRlbnRQb3NpdGlvbjogUG9wb3ZlckNvbnRlbnRQb3NpdGlvbiA9ICd0b3AtbGVmdCc7XHJcblxyXG4gIEBJbnB1dCgpIGljb25Ib3ZlckNsYXNzOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgQFZpZXdDaGlsZCgnY29udGVudCcpIHB1YmxpYyBjb250ZW50ITogVGVtcGxhdGVSZWY8YW55PjtcclxuXHJcbiAgcHJpdmF0ZSBvdmVybGF5UmVmPzogT3ZlcmxheVJlZjtcclxuICBwcml2YXRlIGNvbnRlbnRWaWV3UmVmPzogRW1iZWRkZWRWaWV3UmVmPGFueT47XHJcbiAgcHJpdmF0ZSBjb250ZW50UmVjdD86IERPTVJlY3Q7XHJcbiAgcHJpdmF0ZSBpc1Zpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksXHJcbiAgICBwcml2YXRlIHZpZXdDb250YWluZXJSZWY6IFZpZXdDb250YWluZXJSZWYsXHJcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWZcclxuICApIHsgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIHRoaXMuaGlkZSgpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VvdmVyJylcclxuICBwdWJsaWMgc2hvdygpIHtcclxuICAgIGlmICghdGhpcy5pc1Zpc2libGUpIHtcclxuICAgICAgY29uc3Qgb3ZlcmxheUNvbmZpZyA9IHRoaXMuZ2V0T3ZlcmxheUNvbmZpZygpO1xyXG4gICAgICB0aGlzLm92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKG92ZXJsYXlDb25maWcpO1xyXG4gIFxyXG4gICAgICBjb25zdCBjb250ZW50UG9ydGFsID0gbmV3IFRlbXBsYXRlUG9ydGFsKHRoaXMuY29udGVudCwgdGhpcy52aWV3Q29udGFpbmVyUmVmKTtcclxuICAgICAgdGhpcy5jb250ZW50Vmlld1JlZiA9IHRoaXMub3ZlcmxheVJlZi5hdHRhY2goY29udGVudFBvcnRhbCk7XHJcbiAgXHJcbiAgICAgIHRoaXMuaXNWaXNpYmxlID0gdHJ1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEhpZGVzIHRoZSBwb3BvdmVyIGlmIHRoZSBtb3VzZSBtb3ZlcyBvdXRzaWRlIG9mIHRoZSBwb3BvdmVyIGNvbnRlbnRcclxuICAgKi9cclxuICBwdWJsaWMgb25Nb3VzZU1vdmUoZXZlbnQ6IE1vdXNlRXZlbnQpIHtcclxuICAgIGlmICghdGhpcy5jb250ZW50UmVjdCkge1xyXG4gICAgICB0aGlzLmNvbnRlbnRSZWN0ID0gdGhpcy5jb250ZW50Vmlld1JlZj8ucm9vdE5vZGVzWzBdLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0aGlzLmNvbnRlbnRSZWN0KSB7XHJcbiAgICAgIGlmIChcclxuICAgICAgICAgIGV2ZW50LmNsaWVudFggPiB0aGlzLmNvbnRlbnRSZWN0LnJpZ2h0IFxyXG4gICAgICAgfHwgZXZlbnQuY2xpZW50WCA8IHRoaXMuY29udGVudFJlY3QubGVmdFxyXG4gICAgICAgfHwgZXZlbnQuY2xpZW50WSA+IHRoaXMuY29udGVudFJlY3QuYm90dG9tXHJcbiAgICAgICB8fCBldmVudC5jbGllbnRZIDwgdGhpcy5jb250ZW50UmVjdC50b3BcclxuICAgICAgKSB7XHJcbiAgICAgICAgdGhpcy5oaWRlKCk7XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgaGlkZSgpIHtcclxuICAgIHRoaXMuY29udGVudFJlY3QgPSB1bmRlZmluZWQ7XHJcbiAgICB0aGlzLm92ZXJsYXlSZWY/LmRpc3Bvc2UoKTtcclxuICAgIHRoaXMuaXNWaXNpYmxlID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGdldE92ZXJsYXlDb25maWcoKTogT3ZlcmxheUNvbmZpZyB7XHJcbiAgICBjb25zdCBwb3NpdGlvbiA9IHRoaXMuZ2V0UG9zaXRpb24oKTtcclxuXHJcbiAgICBjb25zdCBwb3NpdGlvblN0cmF0ZWd5ID0gdGhpcy5vdmVybGF5LnBvc2l0aW9uKClcclxuICAgICAgLmZsZXhpYmxlQ29ubmVjdGVkVG8odGhpcy5lbGVtZW50UmVmKVxyXG4gICAgICAud2l0aFBvc2l0aW9ucyhbcG9zaXRpb25dKTtcclxuXHJcbiAgICBjb25zdCBjb25maWcgPSBuZXcgT3ZlcmxheUNvbmZpZyh7XHJcbiAgICAgIHBvc2l0aW9uU3RyYXRlZ3k6IHBvc2l0aW9uU3RyYXRlZ3lcclxuICAgIH0pO1xyXG5cclxuICAgIHJldHVybiBjb25maWc7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIGdldFBvc2l0aW9uKCk6IENvbm5lY3RlZFBvc2l0aW9uIHtcclxuICAgIGNvbnN0IHBvc2l0aW9uID0gdGhpcy5jb250ZW50UG9zaXRpb24uc3BsaXQoJy0nKTtcclxuICAgIGNvbnN0IG92ZXJsYXlYID0gPCdzdGFydCcgfCAnZW5kJz4ocG9zaXRpb25bMV0gPT0gJ2xlZnQnID8gJ3N0YXJ0JyA6ICdlbmQnKTtcclxuICAgIGNvbnN0IG92ZXJsYXlZID0gPCd0b3AnIHwgJ2JvdHRvbSc+cG9zaXRpb25bMF07XHJcbiAgICByZXR1cm4geyBvcmlnaW5YOiBvdmVybGF5WCwgb3JpZ2luWTogb3ZlcmxheVksIG92ZXJsYXlYOiBvdmVybGF5WCwgb3ZlcmxheVk6IG92ZXJsYXlZIH07XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJwLTJcIj5cclxuICA8aSBjbGFzcz1cImVjLWljb24ge3tpY29ufX0gZWMtaWNvbi1zbVwiPjwvaT5cclxuPC9kaXY+XHJcblxyXG48bmctdGVtcGxhdGUgI2NvbnRlbnQ+XHJcbiAgPGFydGljbGUgY2xhc3M9XCJwb3BvdmVyLWNvbnRlbnRcIlxyXG4gICAgICAgICAgIChkb2N1bWVudDptb3VzZW1vdmUpPVwib25Nb3VzZU1vdmUoJGV2ZW50KVwiPlxyXG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gIDwvYXJ0aWNsZT5cclxuICA8ZGl2IGNsYXNzPVwicC0yIHt7Y29udGVudFBvc2l0aW9ufX1cIj5cclxuICAgIDxpIGNsYXNzPVwiZWMtaWNvbiB7e2ljb259fSBlYy1pY29uLXNtIHt7aWNvbkhvdmVyQ2xhc3N9fVwiPjwvaT5cclxuICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuIl19

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

@@ -0,0 +1,81 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { FormControlBase } from '../form-control-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../../core/validation-message.service";
+import * as i2 from "../../shared/form-group.helper";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@ngx-translate/core";
+/**
+ * A single or group of radio button. Only one option can be checked
+ * at a time
+ */
+export class RadioButtonComponent extends FormControlBase {
+    constructor(validationMessageService, formGroupHelper) {
+        super(validationMessageService, formGroupHelper);
+        this.validationMessageService = validationMessageService;
+        this.formGroupHelper = formGroupHelper;
+        /**
+         * Display the radio button options as a default set of radio button inputs or
+         * as a toggle switch
+         * @default 'radio'
+         */
+        this.type = "radio";
+        /**
+         * One or more options to display
+         */
+        this.options = [];
+        /**
+         * If there is more than one option, display them in a row or column.
+         * @default 'row'
+         */
+        this.direction = "row";
+        /**
+        * The name of the radio input element used to group radio elements
+        * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+        */
+        this.name = '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.currentClasses = [];
+        if (this.type === 'toggle') {
+            this.currentClasses.push('radio-group-toggle');
+        }
+        else if (this.direction === 'column') {
+            this.currentClasses.push('radio-group-column');
+        }
+        // If the formModel is assigned an undefined or null value, set it to the first option
+        this.formModel.valueChanges.subscribe(() => {
+            if (this.formModel.value === undefined || this.formModel.value === null) {
+                this.formModel.setValue(this.options[0].value);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            this.inputElement.nativeElement.focus();
+        }
+        if (this.options.length > 5 && this.type === "toggle") {
+            console.warn("Radio button components with a type of toggle cannot have more than 5 options");
+        }
+    }
+}
+RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\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}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *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>\r\n", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}: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-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:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-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{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color-legacy);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-legacy);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.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;top:0;left:0;bottom:0;right:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-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-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-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.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: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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  <label *ngIf=\"label\"\r\n         ngPreserveWhitespaces>\r\n    <span>{{label | translate}}</span>\r\n\r\n    <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n  </label>\r\n\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}}\" *ngIf=\"option.icon\"></i>\r\n          <span id=\"{{inputId}}_label{{i.toString()}}\" *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>\r\n", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}: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-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:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-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{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color-legacy);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-legacy);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.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;top:0;left:0;bottom:0;right:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-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-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-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.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: function () { return [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }]; }, propDecorators: { type: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['radioInput']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLEtBQUssRUFBVSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHL0YsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7Ozs7O0FBb0J2RDs7O0dBR0c7QUFDSCxNQUFNLE9BQU8sb0JBQXFCLFNBQVEsZUFBZTtJQXFDdkQsWUFDWSx3QkFBa0QsRUFDbEQsZUFBZ0M7UUFFMUMsS0FBSyxDQUFDLHdCQUF3QixFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBSHZDLDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBMEI7UUFDbEQsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBdEM1Qzs7OztXQUlHO1FBQ2EsU0FBSSxHQUFxQixPQUFPLENBQUM7UUFFakQ7O1dBRUc7UUFDYSxZQUFPLEdBQXdCLEVBQUUsQ0FBQztRQUVsRDs7O1dBR0c7UUFDYSxjQUFTLEdBQTBCLEtBQUssQ0FBQztRQUV6RDs7O1VBR0U7UUFDYyxTQUFJLEdBQVcsRUFBRSxDQUFDO0lBbUJsQyxDQUFDO0lBRUQsUUFBUTtRQUNOLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsY0FBYyxHQUFHLEVBQUUsQ0FBQztRQUV6QixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxFQUFFO1lBQzFCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7U0FDaEQ7YUFBTSxJQUFJLElBQUksQ0FBQyxTQUFTLEtBQUssUUFBUSxFQUFFO1lBQ3RDLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7U0FDaEQ7UUFFRCxzRkFBc0Y7UUFDdEYsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtZQUN6QyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssS0FBSyxJQUFJLEVBQUU7Z0JBQ3ZFLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDaEQ7UUFDSCxDQUFDLENBQUMsQ0FBQTtJQUNKLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ3pDO1FBRUQsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRLEVBQUU7WUFDckQsT0FBTyxDQUFDLElBQUksQ0FBQywrRUFBK0UsQ0FBQyxDQUFDO1NBQy9GO0lBQ0gsQ0FBQzs7aUhBdEVVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLDZRQzNCakMsMmdIQTBFQTsyRkQvQ2Esb0JBQW9CO2tCQVZoQyxTQUFTOytCQUNFLGdCQUFnQjs2SUFlVixJQUFJO3NCQUFuQixLQUFLO2dCQUtVLE9BQU87c0JBQXRCLEtBQUs7Z0JBTVUsU0FBUztzQkFBeEIsS0FBSztnQkFNVSxJQUFJO3NCQUFuQixLQUFLO2dCQVk2QixZQUFZO3NCQUE5QyxTQUFTO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBWYWxpZGF0aW9uTWVzc2FnZVNlcnZpY2UgfSBmcm9tICcuLi8uLi9jb3JlL3ZhbGlkYXRpb24tbWVzc2FnZS5zZXJ2aWNlJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwSGVscGVyIH0gZnJvbSAnLi4vLi4vc2hhcmVkL2Zvcm0tZ3JvdXAuaGVscGVyJztcclxuaW1wb3J0IHsgRm9ybUNvbnRyb2xCYXNlIH0gZnJvbSAnLi4vZm9ybS1jb250cm9sLWJhc2UnO1xyXG5pbXBvcnQgeyBSYWRpb0J1dHRvbk9wdGlvbiB9IGZyb20gJy4vcmFkaW8tYnV0dG9uLW9wdGlvbic7XHJcblxyXG5cclxuLyoqXHJcbiAqIFJvdyBkaXNwbGF5cyBvcHRpb25zIGhvcml6b250YWxseSwgY29sdW1uIGRpc3BsYXlzIG9wdGlvbnMgdmVydGljYWxseVxyXG4gKi9cclxuZXhwb3J0IHR5cGUgUmFkaW9CdXR0b25EaXJlY3Rpb24gPSBcInJvd1wiIHwgXCJjb2x1bW5cIjtcclxuXHJcbi8qKlxyXG4gKiBSYWRpbyBpcyB0aGUgZGVmYXVsdCBidXR0b24gc3R5bGUsIHRvZ2dsZSB3aWxsIHN0eWxlIGFzIGEgdG9nZ2xlIHN3aXRjaFxyXG4gKi9cclxuZXhwb3J0IHR5cGUgUmFkaW9CdXR0b25UeXBlID0gXCJyYWRpb1wiIHwgXCJ0b2dnbGVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZWMtcmFkaW9idXR0b24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yYWRpby1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcblxyXG4vKipcclxuICogQSBzaW5nbGUgb3IgZ3JvdXAgb2YgcmFkaW8gYnV0dG9uLiBPbmx5IG9uZSBvcHRpb24gY2FuIGJlIGNoZWNrZWRcclxuICogYXQgYSB0aW1lXHJcbiAqL1xyXG5leHBvcnQgY2xhc3MgUmFkaW9CdXR0b25Db21wb25lbnQgZXh0ZW5kcyBGb3JtQ29udHJvbEJhc2UgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkluaXQge1xyXG4gIC8qKlxyXG4gICAqIERpc3BsYXkgdGhlIHJhZGlvIGJ1dHRvbiBvcHRpb25zIGFzIGEgZGVmYXVsdCBzZXQgb2YgcmFkaW8gYnV0dG9uIGlucHV0cyBvclxyXG4gICAqIGFzIGEgdG9nZ2xlIHN3aXRjaFxyXG4gICAqIEBkZWZhdWx0ICdyYWRpbydcclxuICAgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgdHlwZT86IFJhZGlvQnV0dG9uVHlwZSA9IFwicmFkaW9cIjtcclxuXHJcbiAgLyoqXHJcbiAgICogT25lIG9yIG1vcmUgb3B0aW9ucyB0byBkaXNwbGF5XHJcbiAgICovXHJcbiAgQElucHV0KCkgcHVibGljIG9wdGlvbnM6IFJhZGlvQnV0dG9uT3B0aW9uW10gPSBbXTtcclxuXHJcbiAgLyoqXHJcbiAgICogSWYgdGhlcmUgaXMgbW9yZSB0aGFuIG9uZSBvcHRpb24sIGRpc3BsYXkgdGhlbSBpbiBhIHJvdyBvciBjb2x1bW4uXHJcbiAgICogQGRlZmF1bHQgJ3JvdydcclxuICAgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgZGlyZWN0aW9uPzogUmFkaW9CdXR0b25EaXJlY3Rpb24gPSBcInJvd1wiO1xyXG5cclxuICAvKipcclxuICAqIFRoZSBuYW1lIG9mIHRoZSByYWRpbyBpbnB1dCBlbGVtZW50IHVzZWQgdG8gZ3JvdXAgcmFkaW8gZWxlbWVudHNcclxuICAqIEBzZWUgaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSFRNTC9FbGVtZW50L2lucHV0L3JhZGlvXHJcbiAgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgbmFtZTogc3RyaW5nID0gJyc7XHJcblxyXG4gIC8qKlxyXG4gICAqIEFuIGFycmF5IG9mIGNsYXNzbmFtZXMgdGhhdCB3aWxsIGJlIHBhc3NlZCBpbnRvIG5nQ2xhc3NcclxuICAgKi9cclxuICBwdWJsaWMgY3VycmVudENsYXNzZXMhOiBzdHJpbmdbXTtcclxuXHJcbiAgLyoqXHJcbiAgICogUmVmZXJlbmNlIHRvIHRoZSBmaXJzdCBpbnB1dCBmb3VuZCB3aXRoIHRoZSByYWRpb0lucHV0IHJlZmVyZW5jZSB2YXJpYWJsZS4gIEFsbCByYWRpb1xyXG4gICAqIGlucHV0cyBmb3IgdGhpcyBjb21wb25lbnQgd2lsbCBiZSB0YWdnZWQgd2l0aCB0aGlzIHJlZiB2YXJpYWJsZSwgYnV0IG9ubHkgdGhlIGZpcnN0IGZvdW5kXHJcbiAgICogd2lsbCBiZSBzZWxlY3RlZCBhcyB0aGUgaW5wdXRFbGVtZW50IGZvciBhdXRvZm9jdXNcclxuICAgKi9cclxuICBAVmlld0NoaWxkKCdyYWRpb0lucHV0JykgcHJvdGVjdGVkIGlucHV0RWxlbWVudCE6IEVsZW1lbnRSZWY7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJvdGVjdGVkIHZhbGlkYXRpb25NZXNzYWdlU2VydmljZTogVmFsaWRhdGlvbk1lc3NhZ2VTZXJ2aWNlLFxyXG4gICAgcHJvdGVjdGVkIGZvcm1Hcm91cEhlbHBlcjogRm9ybUdyb3VwSGVscGVyXHJcbiAgKSB7XHJcbiAgICBzdXBlcih2YWxpZGF0aW9uTWVzc2FnZVNlcnZpY2UsIGZvcm1Hcm91cEhlbHBlcik7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgICB0aGlzLmN1cnJlbnRDbGFzc2VzID0gW107XHJcblxyXG4gICAgaWYgKHRoaXMudHlwZSA9PT0gJ3RvZ2dsZScpIHtcclxuICAgICAgdGhpcy5jdXJyZW50Q2xhc3Nlcy5wdXNoKCdyYWRpby1ncm91cC10b2dnbGUnKTtcclxuICAgIH0gZWxzZSBpZiAodGhpcy5kaXJlY3Rpb24gPT09ICdjb2x1bW4nKSB7XHJcbiAgICAgIHRoaXMuY3VycmVudENsYXNzZXMucHVzaCgncmFkaW8tZ3JvdXAtY29sdW1uJyk7XHJcbiAgICB9XHJcblxyXG4gICAgLy8gSWYgdGhlIGZvcm1Nb2RlbCBpcyBhc3NpZ25lZCBhbiB1bmRlZmluZWQgb3IgbnVsbCB2YWx1ZSwgc2V0IGl0IHRvIHRoZSBmaXJzdCBvcHRpb25cclxuICAgIHRoaXMuZm9ybU1vZGVsLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICBpZiAodGhpcy5mb3JtTW9kZWwudmFsdWUgPT09IHVuZGVmaW5lZCB8fCB0aGlzLmZvcm1Nb2RlbC52YWx1ZSA9PT0gbnVsbCkge1xyXG4gICAgICAgIHRoaXMuZm9ybU1vZGVsLnNldFZhbHVlKHRoaXMub3B0aW9uc1swXS52YWx1ZSk7XHJcbiAgICAgIH1cclxuICAgIH0pXHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICBpZiAodGhpcy5hdXRvZm9jdXMpIHtcclxuICAgICAgdGhpcy5pbnB1dEVsZW1lbnQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0aGlzLm9wdGlvbnMubGVuZ3RoID4gNSAmJiB0aGlzLnR5cGUgPT09IFwidG9nZ2xlXCIpIHtcclxuICAgICAgY29uc29sZS53YXJuKFwiUmFkaW8gYnV0dG9uIGNvbXBvbmVudHMgd2l0aCBhIHR5cGUgb2YgdG9nZ2xlIGNhbm5vdCBoYXZlIG1vcmUgdGhhbiA1IG9wdGlvbnNcIik7XHJcbiAgICB9XHJcbiAgfVxyXG59IiwiPGRpdiBjbGFzcz1cImNvbnRyb2xcIlxyXG4gICAgIFtjbGFzcy5jb250cm9sLWxhYmVsLWJvdHRvbV09XCJsYWJlbFBvc2l0aW9uID09PSAnYm90dG9tJ1wiPlxyXG4gIDxsYWJlbCAqbmdJZj1cImxhYmVsXCJcclxuICAgICAgICAgbmdQcmVzZXJ2ZVdoaXRlc3BhY2VzPlxyXG4gICAgPHNwYW4+e3tsYWJlbCB8IHRyYW5zbGF0ZX19PC9zcGFuPlxyXG5cclxuICAgIDxzcGFuICpuZ0lmPVwidmFsaWRhdGlvbkVycm9ycy5sZW5ndGggPiAwICYmIGZvcm1Nb2RlbC50b3VjaGVkICYmIGZvcm1Nb2RlbC5pbnZhbGlkXCI+e3t2YWxpZGF0aW9uRXJyb3JzIHwgdHJhbnNsYXRlfX08L3NwYW4+XHJcbiAgPC9sYWJlbD5cclxuXHJcblxyXG4gIDxkaXYgY2xhc3M9XCJyYWRpby1ncm91cCB7eyd0b2dnbGUtb3B0aW9ucy0nICsgb3B0aW9ucy5sZW5ndGh9fVwiXHJcbiAgICAgICBbbmdDbGFzc109XCJjdXJyZW50Q2xhc3Nlc1wiXHJcbiAgICAgICBbY2xhc3MuaXMtZGlzYWJsZWRdPVwiZm9ybU1vZGVsLmRpc2FibGVkXCJcclxuICAgICAgIFtjbGFzcy5pcy1yZWFkb25seV09XCJyZWFkb25seVwiPlxyXG5cclxuICAgIDwhLS0gUmFkaW9CdXR0b24gdHlwZT1cInRvZ2dsZVwiLS0+XHJcbiAgICA8IS0tIFRoZXJlIGFyZSB0d28gbmctdGVtcGxhdGVzIGhlcmUgZHVlIHRvIHRoZSBmYWN0IHlvdSBjYW4ndCBoYXZlIG5nSWYgYW5kIG5nRm9yIG9uIHRoZSBzYW1lIGVsZW1lbnQgLS0+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHlwZSA9PT0gJ3RvZ2dsZSdcIj5cclxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIG9wdGlvbnM7IGluZGV4IGFzIGk7IGZpcnN0IGFzIGlzRmlyc3RcIj5cclxuICAgICAgICA8IS0tIFRoZSBpbnB1dCBoYXMgdHdvIG5hbWUgYXR0cmlidXRlcyBzZXQsIG9uZSBpcyBmb3IgdGhlIGZvcm0gbW9kZWwgYW5kIG9uZSBpcyBmb3IgdGhlIGJyb3N3ZXIuICBXaXRoIG9uZSBzZXRcclxuICAgICAgICAgICAgICAgICAgICAgdGhlIHRhYmJpbmcgZGlkIG5vdCB3b3JrLCBhbmQgd2l0aCB0aGUgb3RoZXIgdGhlIGNvbnRyb2xzIHdlcmUgYWxsIGxpbmtlZCB0b2dldGhlci4gIFRoZXkgYm90aCBuZWVkIHNldFxyXG4gICAgICAgICAgICAgICAgICAgICBmb3IgdGhlIGJlc3Qgb2YgYm90aCB3b3JsZHMgLS0+XHJcbiAgICAgICAgPGlucHV0IFthdHRyLmlkXT1cImlucHV0SWQgKyBpLnRvU3RyaW5nKClcIlxyXG4gICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybU1vZGVsXCJcclxuICAgICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgICAgICAgdGFiaW5kZXg9XCJ7e3RhYmluZGV4fX1cIlxyXG4gICAgICAgICAgICAgICBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCJcclxuICAgICAgICAgICAgICAgI3JhZGlvSW5wdXRcclxuICAgICAgICAgICAgICAgbmFtZT1cInt7bmFtZX19XCJcclxuICAgICAgICAgICAgICAgYXR0ci5uYW1lPVwie3tuYW1lfX1cIlxyXG4gICAgICAgICAgICAgICBbYXR0ci5jZGtGb2N1c0luaXRpYWxdPVwiKGF1dG9mb2N1cyAmJiBpc0ZpcnN0KSB8fCBudWxsXCI+XHJcbiAgICAgICAgPGxhYmVsIFthdHRyLmZvcl09XCJpbnB1dElkICsgaS50b1N0cmluZygpXCJcclxuICAgICAgICAgICAgICAgdGl0bGU9XCJ7eyBvcHRpb24udG9vbHRpcCB8IHRyYW5zbGF0ZX19XCI+XHJcbiAgICAgICAgICA8aSBjbGFzcz1cImVjLWljb24ge3tvcHRpb24uaWNvbn19XCIgKm5nSWY9XCJvcHRpb24uaWNvblwiPjwvaT5cclxuICAgICAgICAgIDxzcGFuIGlkPVwie3tpbnB1dElkfX1fbGFiZWx7e2kudG9TdHJpbmcoKX19XCIgKm5nSWY9XCJvcHRpb24ubGFiZWxcIj57e29wdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZX19PC9zcGFuPlxyXG4gICAgICAgIDwvbGFiZWw+XHJcbiAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICA8YT5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlLWhhbmRsZVwiPjwvZGl2PlxyXG4gICAgICA8L2E+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtZm9jdXNlZFwiPjwvZGl2PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcblxyXG4gICAgPCEtLSBSYWRpb0J1dHRvbiB0eXBlPVwicmFkaW9cIi0tPlxyXG4gICAgPCEtLSBUaGVyZSBhcmUgdHdvIG5nLXRlbXBsYXRlcyBoZXJlIGR1ZSB0byB0aGUgZmFjdCB5b3UgY2FuJ3QgaGF2ZSBuZ0lmIGFuZCBuZ0ZvciBvbiB0aGUgc2FtZSBlbGVtZW50IC0tPlxyXG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdyYWRpbydcIj5cclxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIG9wdGlvbnM7IGluZGV4IGFzIGk7IGZpcnN0IGFzIGlzRmlyc3RcIj5cclxuICAgICAgICA8bGFiZWwgY2xhc3M9J3JhZGlvLWJ1dHRvbidcclxuICAgICAgICAgICAgICAgdGl0bGU9XCJ7eyBvcHRpb24udG9vbHRpcCB8IHRyYW5zbGF0ZX19XCI+XHJcbiAgICAgICAgICA8IS0tIFRoZSBpbnB1dCBoYXMgdHdvIG5hbWUgYXR0cmlidXRlcyBzZXQsIG9uZSBpcyBmb3IgdGhlIGZvcm0gbW9kZWwgYW5kIG9uZSBpcyBmb3IgdGhlIGJyb3N3ZXIuICBXaXRoIG9uZSBzZXRcclxuICAgICAgICAgICAgICAgICAgICAgdGhlIHRhYmJpbmcgZGlkIG5vdCB3b3JrLCBhbmQgd2l0aCB0aGUgb3RoZXIgdGhlIGNvbnRyb2xzIHdlcmUgYWxsIGxpbmtlZCB0b2dldGhlci4gIFRoZXkgYm90aCBuZWVkIHNldFxyXG4gICAgICAgICAgICAgICAgICAgICBmb3IgdGhlIGJlc3Qgb2YgYm90aCB3b3JsZHMgLS0+XHJcbiAgICAgICAgICA8aW5wdXQgW2F0dHIuaWRdPVwiaW5wdXRJZCArIGkudG9TdHJpbmcoKVwiXHJcbiAgICAgICAgICAgICAgICAgY2xhc3M9XCJpbnB1dFwiXHJcbiAgICAgICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Nb2RlbFwiXHJcbiAgICAgICAgICAgICAgICAgdHlwZT1cInJhZGlvXCJcclxuICAgICAgICAgICAgICAgICB2YWx1ZT1cInt7b3B0aW9uLnZhbHVlfX1cIlxyXG4gICAgICAgICAgICAgICAgICNyYWRpb0lucHV0XHJcbiAgICAgICAgICAgICAgICAgdGFiaW5kZXg9XCJ7e3RhYmluZGV4fX1cIlxyXG4gICAgICAgICAgICAgICAgIG5hbWU9XCJ7e25hbWV9fVwiXHJcbiAgICAgICAgICAgICAgICAgYXR0ci5uYW1lPVwie3tuYW1lfX1cIlxyXG4gICAgICAgICAgICAgICAgIFthdHRyLmNka0ZvY3VzSW5pdGlhbF09XCIoYXV0b2ZvY3VzICYmIGlzRmlyc3QpIHx8IG51bGxcIj5cclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiaW5kaWNhdG9yXCI+PC9zcGFuPlxyXG4gICAgICAgICAgPHNwYW4gaWQ9XCJ7e2lucHV0SWR9fV9sYWJlbHt7aS50b1N0cmluZygpfX1cIlxyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJsYWJlbFwiXHJcbiAgICAgICAgICAgICAgICAqbmdJZj1cIm9wdGlvbi5sYWJlbFwiXHJcbiAgICAgICAgICAgICAgICBbaW5uZXJIdG1sXT1cIm9wdGlvbi5sYWJlbCB8IHRyYW5zbGF0ZVwiPjwvc3Bhbj5cclxuICAgICAgICA8L2xhYmVsPlxyXG4gICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=

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

@@ -0,0 +1,87 @@
+import { Component, Input } from '@angular/core';
+import { FormControlBase } from '../form-control-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../../core/validation-message.service";
+import * as i2 from "../../shared/form-group.helper";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@ngx-translate/core";
+export class SelectComponent extends FormControlBase {
+    constructor(validationMessageService, formGroupHelper, el) {
+        super(validationMessageService, formGroupHelper);
+        this.validationMessageService = validationMessageService;
+        this.formGroupHelper = formGroupHelper;
+        this.el = el;
+        /**
+         * When the component is not required, defines the label for an additional first option that sets the control to null
+         */
+        this.placeholder = '';
+        /**
+         * When the component is not required, an additional option is added with a value of null.
+         */
+        this.options = [];
+        /**
+         * Select a default option automatically during initialization and when options change. Default: `true`.
+         * * If formModel has a value
+         *   * Make no change if the current value exists in options
+         *   * Otherwise, set value to the first option if control is required, or null if optional and emit event
+         * * If formModel has no value
+         *   * Set value to first option if control is required and emit eventSet to false to manually manage form state.
+         *
+         * Set to false to opt out of automatic state management
+         */
+        this.autoDefault = true;
+    }
+    ngOnChanges(changes) {
+        if (changes.options && this.autoDefault) {
+            this.onOptionsChange(changes.options.firstChange);
+        }
+        super.ngOnChanges(changes);
+    }
+    ngAfterViewInit() {
+        if (this.autofocus) {
+            this.focus();
+        }
+        if (!this.autoDefault) {
+            console.warn(`SelectComponent#${this.id} has 'autoDefault' set to false and will not select the default option.`);
+        }
+    }
+    focus() {
+        const hostEl = this.el.nativeElement;
+        const selectEl = hostEl.querySelector('select');
+        if (selectEl) {
+            selectEl.focus();
+        }
+    }
+    /**
+     * If formModel has a value
+     *  * Make no change if the current value exists in options
+     *  * Otherwise, set value to the first option if control is required, or null if optional and emit event
+     * If formModel has no value
+     *  * Set value to first option if control is required and emit event
+     */
+    onOptionsChange(firstChange) {
+        if (this.formModel.value !== null && this.formModel.value !== undefined && this.formModel.value !== '') {
+            if (this.options.every(opt => opt.value !== this.formModel.value)) {
+                const value = this.required ? this.options[0]?.value : null;
+                this.formModel.setValue(value, { emitEvent: !firstChange });
+            }
+        }
+        else if (this.required) {
+            this.formModel.setValue(this.options[0]?.value, { emitEvent: !firstChange });
+        }
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: i1.ValidationMessageService }, { token: i2.FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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  <label for=\"{{id}}_select\"\r\n         *ngIf=\"label\"\r\n         ngPreserveWhitespaces>{{label|translate}}</label>\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</div>", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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;appearance:none;border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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  <label for=\"{{id}}_select\"\r\n         *ngIf=\"label\"\r\n         ngPreserveWhitespaces>{{label|translate}}</label>\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</div>", styles: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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;appearance:none;border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"%23ffe433\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ValidationMessageService }, { type: i2.FormGroupHelper }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], autoDefault: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLEtBQUssRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFHM0YsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFDOzs7Ozs7O0FBUXZELE1BQU0sT0FBTyxlQUFnQixTQUFRLGVBQWU7SUF3QmxELFlBQ1ksd0JBQWtELEVBQ2xELGVBQWdDLEVBQ2xDLEVBQWM7UUFFdEIsS0FBSyxDQUFDLHdCQUF3QixFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBSnZDLDZCQUF3QixHQUF4Qix3QkFBd0IsQ0FBMEI7UUFDbEQsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBQ2xDLE9BQUUsR0FBRixFQUFFLENBQVk7UUF6QnhCOztXQUVHO1FBQ00sZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFFMUI7O1dBRUc7UUFDTSxZQUFPLEdBQWUsRUFBRSxDQUFDO1FBRWxDOzs7Ozs7Ozs7V0FTRztRQUNNLGdCQUFXLEdBQVksSUFBSSxDQUFDO0lBUXJDLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDdkMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQ25EO1FBQ0QsS0FBSyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDZDtRQUVELElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3JCLE9BQU8sQ0FBQyxJQUFJLENBQUMsbUJBQW1CLElBQUksQ0FBQyxFQUFFLHlFQUF5RSxDQUFDLENBQUE7U0FDbEg7SUFDSCxDQUFDO0lBRU8sS0FBSztRQUNYLE1BQU0sTUFBTSxHQUFnQixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQztRQUNsRCxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ2hELElBQUksUUFBUSxFQUFFO1lBQ1osUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQztJQUVEOzs7Ozs7T0FNRztJQUNLLGVBQWUsQ0FBQyxXQUFvQjtRQUMxQyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLEtBQUssRUFBRSxFQUFFO1lBQ3RHLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ2pFLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBRSxJQUFJLENBQUM7Z0JBQzdELElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxFQUFDLFNBQVMsRUFBRSxDQUFDLFdBQVcsRUFBQyxDQUFDLENBQUM7YUFDM0Q7U0FDRjthQUFNLElBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUN2QixJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxFQUFDLFNBQVMsRUFBRSxDQUFDLFdBQVcsRUFBQyxDQUFDLENBQUM7U0FDNUU7SUFDSCxDQUFDOzs0R0F6RVUsZUFBZTtnR0FBZixlQUFlLHFMQ1g1QiwycUJBZU07MkZESk8sZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxXQUFXO3NLQVNaLFdBQVc7c0JBQW5CLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLO2dCQVlHLFdBQVc7c0JBQW5CLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFZhbGlkYXRpb25NZXNzYWdlU2VydmljZSB9IGZyb20gJy4uLy4uL2NvcmUvdmFsaWRhdGlvbi1tZXNzYWdlLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBGb3JtR3JvdXBIZWxwZXIgfSBmcm9tICcuLi8uLi9zaGFyZWQvZm9ybS1ncm91cC5oZWxwZXInO1xyXG5pbXBvcnQgeyBGb3JtQ29udHJvbEJhc2UgfSBmcm9tICcuLi9mb3JtLWNvbnRyb2wtYmFzZSc7XHJcbmltcG9ydCB7IE1lbnVJdGVtIH0gZnJvbSAnLi4vbWVudS9tZW51LmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2VjLXNlbGVjdCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NlbGVjdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFNlbGVjdENvbXBvbmVudCBleHRlbmRzIEZvcm1Db250cm9sQmFzZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xyXG5cclxuICAvKipcclxuICAgKiBXaGVuIHRoZSBjb21wb25lbnQgaXMgbm90IHJlcXVpcmVkLCBkZWZpbmVzIHRoZSBsYWJlbCBmb3IgYW4gYWRkaXRpb25hbCBmaXJzdCBvcHRpb24gdGhhdCBzZXRzIHRoZSBjb250cm9sIHRvIG51bGxcclxuICAgKi9cclxuICBASW5wdXQoKSBwbGFjZWhvbGRlciA9ICcnO1xyXG5cclxuICAvKipcclxuICAgKiBXaGVuIHRoZSBjb21wb25lbnQgaXMgbm90IHJlcXVpcmVkLCBhbiBhZGRpdGlvbmFsIG9wdGlvbiBpcyBhZGRlZCB3aXRoIGEgdmFsdWUgb2YgbnVsbC5cclxuICAgKi9cclxuICBASW5wdXQoKSBvcHRpb25zOiBNZW51SXRlbVtdID0gW107XHJcblxyXG4gIC8qKlxyXG4gICAqIFNlbGVjdCBhIGRlZmF1bHQgb3B0aW9uIGF1dG9tYXRpY2FsbHkgZHVyaW5nIGluaXRpYWxpemF0aW9uIGFuZCB3aGVuIG9wdGlvbnMgY2hhbmdlLiBEZWZhdWx0OiBgdHJ1ZWAuXHJcbiAgICogKiBJZiBmb3JtTW9kZWwgaGFzIGEgdmFsdWVcclxuICAgKiAgICogTWFrZSBubyBjaGFuZ2UgaWYgdGhlIGN1cnJlbnQgdmFsdWUgZXhpc3RzIGluIG9wdGlvbnNcclxuICAgKiAgICogT3RoZXJ3aXNlLCBzZXQgdmFsdWUgdG8gdGhlIGZpcnN0IG9wdGlvbiBpZiBjb250cm9sIGlzIHJlcXVpcmVkLCBvciBudWxsIGlmIG9wdGlvbmFsIGFuZCBlbWl0IGV2ZW50ICBcclxuICAgKiAqIElmIGZvcm1Nb2RlbCBoYXMgbm8gdmFsdWVcclxuICAgKiAgICogU2V0IHZhbHVlIHRvIGZpcnN0IG9wdGlvbiBpZiBjb250cm9sIGlzIHJlcXVpcmVkIGFuZCBlbWl0IGV2ZW50U2V0IHRvIGZhbHNlIHRvIG1hbnVhbGx5IG1hbmFnZSBmb3JtIHN0YXRlLlxyXG4gICAqIFxyXG4gICAqIFNldCB0byBmYWxzZSB0byBvcHQgb3V0IG9mIGF1dG9tYXRpYyBzdGF0ZSBtYW5hZ2VtZW50XHJcbiAgICovXHJcbiAgQElucHV0KCkgYXV0b0RlZmF1bHQ6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByb3RlY3RlZCB2YWxpZGF0aW9uTWVzc2FnZVNlcnZpY2U6IFZhbGlkYXRpb25NZXNzYWdlU2VydmljZSxcclxuICAgIHByb3RlY3RlZCBmb3JtR3JvdXBIZWxwZXI6IEZvcm1Hcm91cEhlbHBlcixcclxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWZcclxuICApIHsgXHJcbiAgICBzdXBlcih2YWxpZGF0aW9uTWVzc2FnZVNlcnZpY2UsIGZvcm1Hcm91cEhlbHBlcik7XHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICBpZiAoY2hhbmdlcy5vcHRpb25zICYmIHRoaXMuYXV0b0RlZmF1bHQpIHtcclxuICAgICAgdGhpcy5vbk9wdGlvbnNDaGFuZ2UoY2hhbmdlcy5vcHRpb25zLmZpcnN0Q2hhbmdlKTtcclxuICAgIH1cclxuICAgIHN1cGVyLm5nT25DaGFuZ2VzKGNoYW5nZXMpO1xyXG4gIH1cclxuICBcclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICBpZiAodGhpcy5hdXRvZm9jdXMpIHtcclxuICAgICAgdGhpcy5mb2N1cygpO1xyXG4gICAgfVxyXG4gICAgXHJcbiAgICBpZiAoIXRoaXMuYXV0b0RlZmF1bHQpIHtcclxuICAgICAgY29uc29sZS53YXJuKGBTZWxlY3RDb21wb25lbnQjJHt0aGlzLmlkfSBoYXMgJ2F1dG9EZWZhdWx0JyBzZXQgdG8gZmFsc2UgYW5kIHdpbGwgbm90IHNlbGVjdCB0aGUgZGVmYXVsdCBvcHRpb24uYClcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgZm9jdXMoKTogdm9pZCB7XHJcbiAgICBjb25zdCBob3N0RWw6IEhUTUxFbGVtZW50ID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xyXG4gICAgY29uc3Qgc2VsZWN0RWwgPSBob3N0RWwucXVlcnlTZWxlY3Rvcignc2VsZWN0Jyk7XHJcbiAgICBpZiAoc2VsZWN0RWwpIHtcclxuICAgICAgc2VsZWN0RWwuZm9jdXMoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIElmIGZvcm1Nb2RlbCBoYXMgYSB2YWx1ZVxyXG4gICAqICAqIE1ha2Ugbm8gY2hhbmdlIGlmIHRoZSBjdXJyZW50IHZhbHVlIGV4aXN0cyBpbiBvcHRpb25zXHJcbiAgICogICogT3RoZXJ3aXNlLCBzZXQgdmFsdWUgdG8gdGhlIGZpcnN0IG9wdGlvbiBpZiBjb250cm9sIGlzIHJlcXVpcmVkLCBvciBudWxsIGlmIG9wdGlvbmFsIGFuZCBlbWl0IGV2ZW50ICBcclxuICAgKiBJZiBmb3JtTW9kZWwgaGFzIG5vIHZhbHVlXHJcbiAgICogICogU2V0IHZhbHVlIHRvIGZpcnN0IG9wdGlvbiBpZiBjb250cm9sIGlzIHJlcXVpcmVkIGFuZCBlbWl0IGV2ZW50XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBvbk9wdGlvbnNDaGFuZ2UoZmlyc3RDaGFuZ2U6IGJvb2xlYW4pOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmZvcm1Nb2RlbC52YWx1ZSAhPT0gbnVsbCAmJiB0aGlzLmZvcm1Nb2RlbC52YWx1ZSAhPT0gdW5kZWZpbmVkICYmIHRoaXMuZm9ybU1vZGVsLnZhbHVlICE9PSAnJykge1xyXG4gICAgICBpZiAodGhpcy5vcHRpb25zLmV2ZXJ5KG9wdCA9PiBvcHQudmFsdWUgIT09IHRoaXMuZm9ybU1vZGVsLnZhbHVlKSkge1xyXG4gICAgICAgIGNvbnN0IHZhbHVlID0gdGhpcy5yZXF1aXJlZCA/IHRoaXMub3B0aW9uc1swXT8udmFsdWUgOiAgbnVsbDtcclxuICAgICAgICB0aGlzLmZvcm1Nb2RlbC5zZXRWYWx1ZSh2YWx1ZSwge2VtaXRFdmVudDogIWZpcnN0Q2hhbmdlfSk7XHJcbiAgICAgIH1cclxuICAgIH0gZWxzZSBpZih0aGlzLnJlcXVpcmVkKSB7XHJcbiAgICAgIHRoaXMuZm9ybU1vZGVsLnNldFZhbHVlKHRoaXMub3B0aW9uc1swXT8udmFsdWUsIHtlbWl0RXZlbnQ6ICFmaXJzdENoYW5nZX0pO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udHJvbFwiXHJcbiAgICAgW25nQ2xhc3NdPVwieydpcy1yZWFkb25seSc6IHJlYWRvbmx5LCAnaXMtZGlzYWJsZWQnOiBmb3JtTW9kZWwuZGlzYWJsZWR9XCI+XHJcbiAgPGxhYmVsIGZvcj1cInt7aWR9fV9zZWxlY3RcIlxyXG4gICAgICAgICAqbmdJZj1cImxhYmVsXCJcclxuICAgICAgICAgbmdQcmVzZXJ2ZVdoaXRlc3BhY2VzPnt7bGFiZWx8dHJhbnNsYXRlfX08L2xhYmVsPlxyXG4gIDxzZWxlY3QgW2F0dHIuaWRdPVwiaW5wdXRJZFwiXHJcbiAgICAgICAgICB0YWJpbmRleD1cInt7dGFiaW5kZXh9fVwiXHJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybU1vZGVsXCJcclxuICAgICAgICAgIFthdHRyLnJlcXVpcmVkXT1cInJlcXVpcmVkXCJcclxuICAgICAgICAgIFthdHRyLmNka0ZvY3VzSW5pdGlhbF09XCJhdXRvZm9jdXMgfHwgbnVsbFwiPlxyXG4gICAgPG9wdGlvbiAqbmdJZj1cIiFyZXF1aXJlZFwiXHJcbiAgICAgICAgICAgIFtuZ1ZhbHVlXT1cIm51bGxcIj57e3BsYWNlaG9sZGVyfX08L29wdGlvbj5cclxuICAgIDxvcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCJcclxuICAgICAgICAgICAgW25nVmFsdWVdPVwib3B0aW9uLnZhbHVlXCI+e3tvcHRpb24ubGFiZWx9fTwvb3B0aW9uPlxyXG4gIDwvc2VsZWN0PlxyXG48L2Rpdj4iXX0=

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

@@ -0,0 +1,47 @@
+import { Component, Input } from '@angular/core';
+import { NavGroup } from '../navigation/nav-group';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/router";
+import * as i3 from "@ngx-translate/core";
+/**
+ * Component to display navigation tabs
+ */
+export class TabsComponent {
+    constructor() {
+        /** The id of the tabs component, will be used as a prefix for each individual tab */
+        this.id = '';
+        /** The tabindex of the tabs component, will be applied to each individual tab */
+        this.tabindex = 0;
+        /** Display tabs in the default style or as pills */
+        this.tabStyle = 'tabs';
+        /** The tabs group */
+        this.tabs = new NavGroup();
+    }
+    /**
+     * Set the selected tab to the one the user clicked on pressed enter
+     * when focused. If the event was a keypress.enter and the tab
+     * has a link, navigate to that link.
+     */
+    selectTab(event, tab) {
+        if (!tab.disabled && (event.type === 'click' || (event.type === 'keypress' && event.key === 'Enter'))) {
+            this.tabs.selected = tab;
+        }
+    }
+}
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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      [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: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color-legacy);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color-legacy);border-left-color:var(--ec-border-color-legacy);border-right-color:var(--ec-border-color-legacy)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.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.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "14.2.0", 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      [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: [":root{--ec-font-size-icon: 1rem;--ec-color-icon: rgba(26, 26, 35, .66)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color-legacy);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color-legacy);border-left-color:var(--ec-border-color-legacy);border-right-color:var(--ec-border-color-legacy)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.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: function () { return []; }, propDecorators: { id: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabStyle: [{
+                type: Input
+            }], tabs: [{
+                type: Input,
+                args: ['tabGroup']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvdGFicy90YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy90YWJzL3RhYnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7OztBQVFuRDs7R0FFRztBQU1ILE1BQU0sT0FBTyxhQUFhO0lBY3hCO1FBWkEscUZBQXFGO1FBQ3JFLE9BQUUsR0FBVyxFQUFFLENBQUM7UUFFaEMsaUZBQWlGO1FBQ2pFLGFBQVEsR0FBVyxDQUFDLENBQUM7UUFFckMsb0RBQW9EO1FBQ3BDLGFBQVEsR0FBcUIsTUFBTSxDQUFDO1FBRXBELHFCQUFxQjtRQUNLLFNBQUksR0FBYSxJQUFJLFFBQVEsRUFBRSxDQUFDO0lBRTFDLENBQUM7SUFFakI7Ozs7T0FJRztJQUNJLFNBQVMsQ0FBQyxLQUFZLEVBQUUsR0FBWTtRQUN6QyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxVQUFVLElBQW9CLEtBQU0sQ0FBQyxHQUFHLEtBQUssT0FBTyxDQUFDLENBQUMsRUFBRTtZQUN0SCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7U0FDMUI7SUFDSCxDQUFDOzswR0F6QlUsYUFBYTs4RkFBYixhQUFhLDZJQ2xCMUIsK3VEQStCYzsyRkRiRCxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFNBQVM7MEVBT0gsRUFBRTtzQkFBakIsS0FBSztnQkFHVSxRQUFRO3NCQUF2QixLQUFLO2dCQUdVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBR29CLElBQUk7c0JBQTdCLEtBQUs7dUJBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmF2SXRlbSB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWl0ZW0nO1xyXG5pbXBvcnQgeyBOYXZHcm91cCB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWdyb3VwJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgVGFiIGV4dGVuZHMgTmF2SXRlbSB7XHJcbiAgdXJsOiBzdHJpbmcsXHJcbiAgdGFicz86IFRhYltdLFxyXG4gIGhpZGU/OiBBcnJheTwoLi4uYXJnczogYW55W10pID0+IGJvb2xlYW4+LFxyXG59XHJcblxyXG4vKipcclxuICogQ29tcG9uZW50IHRvIGRpc3BsYXkgbmF2aWdhdGlvbiB0YWJzXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2VjLXRhYnMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90YWJzLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnQge1xyXG5cclxuICAvKiogVGhlIGlkIG9mIHRoZSB0YWJzIGNvbXBvbmVudCwgd2lsbCBiZSB1c2VkIGFzIGEgcHJlZml4IGZvciBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIGlkOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgLyoqIFRoZSB0YWJpbmRleCBvZiB0aGUgdGFicyBjb21wb25lbnQsIHdpbGwgYmUgYXBwbGllZCB0byBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYmluZGV4OiBudW1iZXIgPSAwO1xyXG5cclxuICAvKiogRGlzcGxheSB0YWJzIGluIHRoZSBkZWZhdWx0IHN0eWxlIG9yIGFzIHBpbGxzICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYlN0eWxlOiAndGFicycgfCAncGlsbHMnID0gJ3RhYnMnO1xyXG5cclxuICAvKiogVGhlIHRhYnMgZ3JvdXAgKi9cclxuICBASW5wdXQoJ3RhYkdyb3VwJykgcHVibGljIHRhYnM6IE5hdkdyb3VwID0gbmV3IE5hdkdyb3VwKCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNldCB0aGUgc2VsZWN0ZWQgdGFiIHRvIHRoZSBvbmUgdGhlIHVzZXIgY2xpY2tlZCBvbiBwcmVzc2VkIGVudGVyXHJcbiAgICogd2hlbiBmb2N1c2VkLiBJZiB0aGUgZXZlbnQgd2FzIGEga2V5cHJlc3MuZW50ZXIgYW5kIHRoZSB0YWJcclxuICAgKiBoYXMgYSBsaW5rLCBuYXZpZ2F0ZSB0byB0aGF0IGxpbmsuXHJcbiAgICovXHJcbiAgcHVibGljIHNlbGVjdFRhYihldmVudDogRXZlbnQsIHRhYjogTmF2SXRlbSkge1xyXG4gICAgaWYgKCF0YWIuZGlzYWJsZWQgJiYgKGV2ZW50LnR5cGUgPT09ICdjbGljaycgfHwgKGV2ZW50LnR5cGUgPT09ICdrZXlwcmVzcycgJiYgKDxLZXlib2FyZEV2ZW50PmV2ZW50KS5rZXkgPT09ICdFbnRlcicpKSkge1xyXG4gICAgICB0aGlzLnRhYnMuc2VsZWN0ZWQgPSB0YWI7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjx1bCAqbmdJZj1cInRhYnM/Lml0ZW1zPy5sZW5ndGhcIiBjbGFzcz1cInt7dGFiU3R5bGV9fVwiPlxyXG5cclxuICA8bGkgY2xhc3M9XCJ7e3RhYi5jbGFzc2xpc3R9fVwiIFtuZ0NsYXNzXT1cInsnaWNvbi1vbmx5JzogdGFiLmljb24gJiYgIXRhYi5sYWJlbH1cIiAqbmdGb3I9XCJsZXQgdGFiIG9mIHRhYnM/Lml0ZW1zOyBpbmRleCBhcyBpO1wiPlxyXG5cclxuICAgIDxhICpuZ0lmPVwidGFiLnVybCAmJiAhdGFiLmRpc2FibGVkXCJcclxuICAgICAgdGFiaW5kZXg9XCJ7e3RhYnM/LnNlbGVjdGVkID09PSB0YWIgPyAtMSA6IHRhYmluZGV4fX1cIlxyXG4gICAgICBjbGFzcz1cInRhYlwiXHJcbiAgICAgIGlkPVwie3t0YWIuaWQgPyB0YWIuaWQgOiBpZCArICdfaXRlbScgKyBpfX1cIlxyXG4gICAgICByb3V0ZXJMaW5rQWN0aXZlPVwiYWN0aXZlXCJcclxuICAgICAgW3JvdXRlckxpbmtdPVwidGFiLnVybFwiXHJcbiAgICAgIFtxdWVyeVBhcmFtc109XCJ0YWIucXVlcnlQYXJhbXMgfHwgbnVsbFwiXHJcbiAgICAgIFtxdWVyeVBhcmFtc0hhbmRsaW5nXT1cInRhYi5xdWVyeVBhcmFtc0hhbmRsaW5nIHx8ICcnXCJcclxuICAgICAgKGtleXByZXNzKT1cInNlbGVjdFRhYigkZXZlbnQsIHRhYilcIlxyXG4gICAgICAoY2xpY2spPVwic2VsZWN0VGFiKCRldmVudCwgdGFiKVwiPlxyXG4gICAgICAgIDxpIGNsYXNzPVwiZWMtaWNvbiB7e3RhYi5pY29ufX1cIiAqbmdJZj1cInRhYi5pY29uXCIgW2NsYXNzLm1yLTFdPVwidGFiLmxhYmVsXCI+PC9pPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC10cnVuY2F0ZVwiPnt7dGFiLmxhYmVsIHwgdHJhbnNsYXRlfX08L3NwYW4+XHJcbiAgICAgICAgPHNwYW4gKm5nSWY9XCJ0YWI/LmluZGljYXRvclwiIGNsYXNzPVwiaW5kaWNhdG9yIG1sLTFcIiBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJ0YWI/LmluZGljYXRvciA9PT0gdHJ1ZSA/ICcnIDogdGFiPy5pbmRpY2F0b3JcIj48L3NwYW4+XHJcbiAgICA8L2E+XHJcblxyXG4gICAgPHNwYW4gKm5nSWY9XCIhdGFiLnVybCB8fCB0YWIuZGlzYWJsZWRcIlxyXG4gICAgICAgICAgdGFiaW5kZXg9XCJ7e3RhYnM/LnNlbGVjdGVkID09PSB0YWIgfHwgdGFiLmRpc2FibGVkID8gLTEgOiB0YWJpbmRleH19XCJcclxuICAgICAgICAgIGlkPVwie3t0YWIuaWQgPyB0YWIuaWQgOiBpZCArICdfaXRlbScgKyBpfX1cIlxyXG4gICAgICAgICAgY2xhc3M9XCJ0YWJcIlxyXG4gICAgICAgICAgW25nQ2xhc3NdPVwieydhY3RpdmUnOiB0YWJzPy5zZWxlY3RlZCA9PT0gdGFiLCAnaXMtZGlzYWJsZWQnOiB0YWIuZGlzYWJsZWR9XCJcclxuICAgICAgICAgIChrZXlwcmVzcyk9XCJzZWxlY3RUYWIoJGV2ZW50LCB0YWIpXCJcclxuICAgICAgICAgIChjbGljayk9XCJzZWxlY3RUYWIoJGV2ZW50LCB0YWIpXCI+XHJcbiAgICAgIDxpIGNsYXNzPVwiZWMtaWNvbiB7e3RhYi5pY29ufX1cIiAqbmdJZj1cInRhYi5pY29uXCIgW2NsYXNzLm1yLTFdPVwidGFiLmxhYmVsXCI+PC9pPlxyXG4gICAgICA8c3BhbiBjbGFzcz1cInRleHQtdHJ1bmNhdGVcIj57e3RhYi5sYWJlbCB8IHRyYW5zbGF0ZX19PC9zcGFuPlxyXG4gICAgICA8c3BhbiAqbmdJZj1cInRhYj8uaW5kaWNhdG9yXCIgY2xhc3M9XCJpbmRpY2F0b3IgbWwtMVwiIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cInRhYj8uaW5kaWNhdG9yID09PSB0cnVlID8gJycgOiB0YWI/LmluZGljYXRvclwiPjwvc3Bhbj5cclxuICAgIDwvc3Bhbj5cclxuICA8L2xpPlxyXG48L3VsPiAgICAgICAgICJdfQ==